为什么XMLHttpRequest成功时跨域angularjs $ http.post请求失败？

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.

我正在尝试使用角度（版本1.0.5）webapp中的应用程序密钥和令牌来运行Trello API。服务器似乎正确配置为处理CORS。来自enable cors的http://test-cors.org的测试请求按预期工作。

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?

我得到一个Request头字段Access-Control-Allow-Headers错误不允许Content-Type。（即使如下所示，Access-Control-Allow-Origin设置为'*'）。为什么添加此标题并将其删除？

XMLHttpRequest

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

当我使用原始XMLHttpRequest发出相同的请求时，它会成功。以下是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

Angular $http.post

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

以下是角度启动请求的标头。请注意，浏览器发出了飞行前OPTIONS请求：

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

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

有没有办法配置角度的请求标头，以允许上面的$ http.post（）代码工作？

6 个解决方案

#1

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:

服务器不接受“content-type”标头，默认情况下会为Angular $ http POST请求添加（请参阅$ http doc）。您可以尝试从$ http配置中删除它。在控制器中注入$ httpProvider，然后这可能会起作用：

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.

您可能还必须尝试'内容类型'，我不确定要使用的情况。

#2

Add the headers param to the $http and you'll be fine.

将标题参数添加到$ http，你会没事的。

          var config = {
            method: 'POST',
            url: 'your url',
            headers: {
              'Content-Type': undefined
           },
           data: {
              "channel": "#fun-and-game",
              "username": $scope.question.title,
              "text": $scope.question.text,
              "icon_emoji": ":ghost:"
          },
       };

      $http(config).success(function(data) {
         $scope.server_resp = data;
      }).error(function(response) {

      });

for more info, check angularjs $http docs

有关更多信息，请检查angularjs $ http docs

#3

As per this angular pull request, CORS can be made to work by deleting X-Requested-With which causes a pre-flight OPTIONS request:

根据此角度拉取请求，可以通过删除X-Requested-With来使CORS工作，这会导致飞行前OPTIONS请求：

App.config(['$httpProvider', function($httpProvider) {
    delete $httpProvider.defaults.headers.common["X-Requested-With"];
}

Note that I have not tried this personally, but a co-worker had to deltete the header to make his CORS request work.

请注意，我没有亲自尝试过，但是同事必须删除标题才能使他的CORS请求正常工作。

#4

I just ran into a similar issue and the problem was that I was getting the url wrong. I was posting to 1/cards/actions/createCard because I missread the docs. I got an access-control related error even though headers etc. look right. Posting to 1/cards created a card, which is what I wanted.

我刚遇到类似的问题，问题是我弄错了网址。我发布了1 / cards / actions / createCard因为我错过了文档。即使标题等看起来正确，我也遇到了与访问控制相关的错误。张贴到1 /卡创建了一张卡，这就是我想要的。

#5

This worked for me

这对我有用

$http({
      method  : "POST",
      url     : url,
      data    : $.param({key: 'value', key2 : 'value'}),
      headers : { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
                })

#6

To avoid this issue, create a function in the server side to catch the 'OPTIONS' and just return true. Some thing as follows.

要避免此问题，请在服务器端创建一个函数以捕获“OPTIONS”并返回true。有些事情如下。

    /**
     * @url OPTIONS /
     */
    public function options()
    {
        return;
    }

#1

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