Angular $http отправляет OPTIONS вместо PUT/POST

Я пытаюсь обновить/вставить данные в базу данных MySQL через PHP-сервер. Я создаю Front End с помощью AngularJS и использую службу $http для связи с REST API.

Моя настройка выглядит так:

Я устанавливаю заголовок через $httpProvider:

 $httpProvider.defaults.withCredentials = true;
 $httpProvider.defaults.headers = {'Content-Type': 'application/json;charset=utf-8'};

И POST-Call выглядит следующим образом:

   return $http({
      url: url,
      method: "POST",
      data: campaign
    });

Консоль Dev в Chrome показывает мне это:

enter image description here

Когда я переключаюсь с POST на PUT, я посылаю вызов OPTIONS вместо PUT. И контент-тип переключается только на content-type.

Моя полезная нагрузка запроса отправляется как объект:

enter image description here

Как правильно настроить заголовок?

EDIT:

Бэкэнд PHP устанавливает некоторые заголовки:

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');

   $e->getResponse()
              ->getHeaders()
              ->addHeaderLine('Access-Control-Allow-Origin', '*');

Что-то не хватает?

Ответы

Ответ 1

Хорошо, я решил.

В чем была проблема?
Рабочий процесс CORS для DELETE, PUT и POST выглядит следующим образом:

enter image description here

Что он делает, это:

  • Проверка того, какой запрос будет сделан
  • Если это POST, PUT или DELETE
  • Сначала он отправляет запрос OPTION для проверки того, совпадает ли домен, с которого отправлен запрос, с сервером.
  • Если не, он хочет, чтобы Access-Header разрешал отправлять этот запрос

Важно: запрос OPTIONS не отправляет учетные данные.

Таким образом, мой серверный сервер запретил запрос PUT.

Решение:
Поместите это в файл .htaccess

RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ blank.php [QSA,L]
Header set Access-Control-Allow-Origin "http://sub.domain:3000"
Header always set Access-Control-Allow-Credentials "true"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

После этого создайте пустой .php файл с именем blank.php внутри общей папки.

EDIT: Как заметил один из комментаторов, вместо создания пустого PHP файла вы можете добавить это правило перезаписи в файл .htaccess \;

RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]]

Чтобы уточнить:

  • Я уже отправил заголовок Access-Control-Header
  • Решено было две первые строки, а
  • Access-Control-Allow-Origin из определенного субдомена с портом

Лучший веб-сайт, который можно найти в узнать больше о CORS.

Ответ 2

Вам не нужно указывать заголовки $http вручную, все это делается для вас за кулисами, и они автоматически устанавливаются в application/json для запросов POST и PUT. Итак, все, что вам нужно сделать, это

$http.post(url, data);
$http.put(url, data);