为什么当XMLHtt prequest成功跨域angularjs $ http.post请求失败？ [英] Why does a cross-domain angularjs $http.post request fail when a XMLHttpRequest succeeds?

问题描述

我试图与应用程序键行使Trello API，并从一个角度（版本1.0.5）的webapp令牌。服务器似乎正确配置来处理 CORS 。与 http://test-cors.org 测试请求从的启用CORS预期工作。

I am trying to exercise the Trello API with an application key and token from an angular (version 1.0.5) webapp. The server seems correctly configured to handle CORS. A test request with http://test-cors.org from enable cors works as expected.

当我在角控制器之一做一个POST请求：

When I do a post request in one of my angular controllers:

$http.post(url).success(function(data) {
  $scope.server_resp = data;
});

我得到的请求头字段内容类型不被访问控制允许报头的允许误差。 （即使，你看到下面的访问控制允许来源被设置为'*'）。这是为什么头添加可以将其删除？

I get a Request header field Content-Type is not allowed by Access-Control-Allow-Headers error. (Even though, as you see below, the Access-Control-Allow-Origin is set to '*'). Why is this header added and can it be removed?

当我把使用原始XMLHtt prequest了同样的要求，它成功。下面是该XMLHtt prequest标题：

When I make the same request using raw XMLHttpRequest, it succeeds. Here are the headers for the XMLHttpRequest:

Request Method:POST
Status Code:200 OK

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:0
Host:api.trello.com
Origin:http://192.168.0.125:9000
Referer:http://192.168.0.125:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22

Response
Access-Control-Allow-Methods:GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Cache-Control:max-age=0, must-revalidate, no-cache, no-store
Content-Length:563
Content-Type:application/json
Date:Mon, 18 Mar 2013 02:49:37 GMT
Expires:Thu, 01 Jan 1970 00:00:00
X-Powered-By:Express
X-Server-Time:1363574977568

角$ http.post

下面是角发起的请求头。需要注意的是浏览器做了一个pre-飞行OPTIONS请求：

Angular $http.post

Here are the headers for the angular initiated request. Note that the browser made a pre-flight OPTIONS request:

Request Method:OPTIONS
Status Code:200 OK

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:api.trello.com
Origin:http://192.168.0.125:9000
Referer:http://192.168.0.125:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22

Response
Access-Control-Allow-Methods:GET, PUT, POST, DELETE
Access-Control-Allow-Origin:*
Content-Length:0
Content-Type:text/html; charset=utf-8
Date:Mon, 18 Mar 2013 02:51:00 GMT
X-Powered-By:Express

有没有配置角度的请求头，使上述$ http.post（）code的工作方式？

Is there a way to configure angular's request headers to allow the above $http.post() code to work?

推荐答案

内容型头不被服务器接受，默认情况下，增加了对角$ HTTP POST请求（见的$http DOC ）。你可以尝试从您的$ HTTP配置中删除。注$ httpProvider在你的控制器，那么这可能工作：

The 'content-type' header is not accepted by the server and is added by default for Angular $http POST request (see $http doc). You can try to remove it from your $http config. Inject $httpProvider in your controller, then this might work:

delete $httpProvider.defaults.headers.post['Content-type']

您可能必须尝试用内涵式也，我不知道的情况下使用。

You might have to try with 'content-type' also, I'm not sure of the case to use.

这篇关于为什么当XMLHtt prequest成功跨域angularjs $ http.post请求失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！