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

时间:2013-03-19 01:58:58

标签: angularjs

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

当我在我的一个角度控制器中发出请求时:

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

我收到请求标头字段Access-Control-Allow-Headers 错误不允许Content-Type。 (即使如下所示,Access-Control-Allow-Origin设置为'*')。为什么添加此标题并将其删除?

的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

以下是角度启动请求的标头。请注意,浏览器发出了飞行前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

有没有办法配置angular的请求标头以允许上面的$ http.post()代码工作?

6 个答案:

答案 0 :(得分:8)

服务器不接受'content-type'标头,默认情况下会为Angular $ http POST请求添加(请参阅$http doc)。您可以尝试从$ http配置中删除它。在控制器中注入$ httpProvider,然后这可能有效:

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

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

答案 1 :(得分:7)

将标题参数添加到$ 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) {

      });

了解更多信息,请查看angularjs $http docs

答案 2 :(得分:1)

根据此角度pull request,可以通过删除X-Requested-With来使CORS起作用,这会导致飞行前的OPTIONS请求:

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

请注意,我没有亲自尝试过这个问题,但是同事必须仔细检查标题才能使他的CORS请求有效。

答案 3 :(得分:0)

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

答案 4 :(得分:0)

这对我有用

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

答案 5 :(得分:0)

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

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