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 工作流程如下:
它的作用是:
- 检查将要发出的请求
- 如果是 POST、PUT 或 DELETE
- 它首先发送一个 OPTION 请求,以检查发送请求的域是否与来自服务器的域相同.
- 如果没有,它希望允许访问头发送此请求
<块引用>
重要提示: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}]]
澄清:
- 我已经发送了 Access-Control-Header
- 它解决的是前两行,以及
- 来自带有端口的特定子域的 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:
- Checking which request is gonna be made
- If it's POST, PUT or DELETE
- 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.
- 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:
- I already sent the Access-Control-Header
- What it solved was the first two lines, and
- 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屋!