Angular $http 发送 OPTIONS 而不是 PUT/POST [英] Angular $http is sending OPTIONS instead of PUT/POST

问题描述

我正在尝试通过 PHP 后端更新/插入 MySQL 数据库中的数据.我正在使用 AngularJS 构建前端，并使用 $http 服务与 REST API 通信.

我的设置如下:

我正在通过 $httpProvider 设置标题:

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

POST-Call 如下所示:

 返回 $http({网址:网址，方法:POST"，数据:广告系列});

Chrome 中的开发控制台向我展示了这一点:

当我从 POST 更改为 PUT 时，我发送的是 OPTIONS 调用而不是 PUT.并且内容类型只切换到 content-type.

我的请求负载作为对象发送:

<块引用>

如何正确设置标题?

<小时>

PHP 后端设置了一些标头:

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

<块引用>

有什么遗漏吗?

解决方案

好的，我已经解决了.

出了什么问题?
DELETE、PUT 和 POST 的 CORS 工作流程如下:

它的作用是:

1. 检查将要发出的请求
2. 如果是 POST、PUT 或 DELETE
3. 它首先发送一个 OPTION 请求，以检查发送请求的域是否与来自服务器的域相同.
4. 如果没有，它希望允许访问头发送此请求

<块引用>

重要提示:OPTIONS 请求不会发送凭据.

所以我的后端服务器不允许 PUT 请求.

解决方案:
把它放在 .htaccess 文件中

RewriteCond %{REQUEST_METHOD} 选项重写规则 ^(.*)$ blank.php [QSA,L]标头集 Access-Control-Allow-Origin "http://sub.domain:3000"标头始终设置 Access-Control-Allow-Credentials true"标题总是设置 Access-Control-Max-Age "1000"标头始终设置 Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"标题总是设置 Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

此后，在公共文件夹中创建一个名为 blank.php 的空 .php 文件.

正如一位评论者所指出的，您可以将此重写规则添加到您的 .htaccess 文件中，而不是创建一个空的 PHP 文件；

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

澄清:

1. 我已经发送了 Access-Control-Header
2. 它解决的是前两行，以及
3. 来自带有端口的特定子域的 Access-Control-Allow-Origin

我能找到的最好的网站，了解有关 CORS 的更多信息.

I am trying to Update/Insert data in a MySQL database through a PHP backend. I'm building the Front End with AngularJS and using the $http service for communicating with the REST API.

My setup looks like this:

I'm setting the header via the $httpProvider:

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

And the POST-Call looks like this:

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

The Dev Console in Chrome shows me this:

When I change from POST to PUT, I'm sending an OPTIONS call instead a PUT. And the content-type switches just to content-type.

My request payload is send as an object:

How do I set my header properly?

---

EDIT:

The PHP backend sets some headers:

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

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

Is there something missing?

解决方案

Ok, I've solved it.

What was the problem?
The CORS workflow for DELETE, PUT and POST is as follows:

What it does, is:

1. Checking which request is gonna be made
2. If it's POST, PUT or DELETE
3. It sends first an OPTION request to check if the domain, from which the request is sent, is the same as the one from the server.
4. If not, it wants an Access-Header to be allowed to send this request

Important here: An OPTIONS request doesn't send credentials.

So my backend server disallowed the PUT request.

Solution:
Putting this inside the .htaccess file

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"

After this, create an empty .php file called blank.php inside the public folder.

EDIT: As one commenter pointed out, instead of creating an empty PHP file, you can add this rewrite rule to your .htaccess file\;

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

To clarify:

1. I already sent the Access-Control-Header
2. What it solved was the first two lines, and
3. Access-Control-Allow-Origin from the specific subdomain with Port

Best website I could find to learn more about CORS.

这篇关于Angular $http 发送 OPTIONS 而不是 PUT/POST的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！