$ http.post请求标头字段Access-Control-Allow-Headers错误不允许Access-Control-Allow-Origin

问题描述：

我正在使用Ionic Framework开发应用程序。

在后端我写了瓶应用的API，它看起来象下面这样：

@API.route("/saverez",methods=["POST","OPTIONS"]) 
@crossdomain(origin='*', headers="*",methods="*") 
@render_api 
def saver(): 
.....

我得到了错误，同时张贴JSON API来。

var headers = { 
        'Access-Control-Allow-Origin' : '*', 
        'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS', 
        'Accept': 'application/json' 
       }; 

       $http({ 
        method: "POST", 
        headers: headers, 
        url: url+ '/api/saverez', 
        data: $scope.form 
       }).success(function (result) 
        console.log(result); 
       }).error(function (data, status, headers, config) { 
        console.log(data); 
        console.log(status); 
        console.log(headers); 
        console.log(config); 
       });

因此，这给我的错误：

XMLHttpRequest cannot load http://myurl/api/saverez. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.

我GOOGLE了它，然后我发现这个片断：

http://flask.pocoo.org/snippets/56/

我还添加了头我的nginx的conf像下面：

location ~* \.(eot|ttf|woff)$ { 
    add_header Access-Control-Allow-Origin *; 
}

试用了该文档中的所有内容，同时还发现了我在谷歌上找到的东西，但遗憾的是它没有任何好处。

如何为所有来源设置正确的标题？我也使用谷歌pagespeed它是否会导致此问题？

在此先感谢。

---编辑--- 的Chrome网络输出

Remote Address:myip 
Request URL:http://myurl/api/saverez 
Request Method:OPTIONS 
Status Code:200 OK 
Request Headersview source 
Accept:*/* 
Accept-Encoding:gzip,deflate,sdch 
Accept-Language:en-US,en;q=0.8 
Access-Control-Request-Headers:access-control-allow-origin, accept, access-control-allow-methods,   content-type 
Access-Control-Request-Method:POST 
Cache-Control:no-cache 
Connection:keep-alive 
Host:myurl 
Origin:http://192.168.1.46:8100 
Pragma:no-cache 
Referer:http://192.168.1.46:8100/ 
User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML,  like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53 
Response Headersview source 
Access-Control-Allow-Credentials:true 
Access-Control-Allow-Headers:* 
Access-Control-Allow-Methods:* 
Access-Control-Allow-Origin:* 
Access-Control-Max-Age:21600 
Allow:POST, OPTIONS 
Content-Length:0 
Content-Type:text/html; charset=utf-8 
Date:Thu, 28 Aug 2014 13:26:11 GMT 
Server:nginx/1.6.0

您可以发布响应的头，请方法的工作？ – Dragu 2014-08-28 14:43:01

@Dragu我编辑了我的帖子 – cankemik 2014-08-28 14:53:00

答

在我的应用程序模块的配置部分，我有以下几点：

angular.module('starterapp', ['ionic']) 
    .config(function ($stateProvider, $httpProvider, $urlRouterProvider) { 

    // We need to setup some parameters for http requests 
    // These three lines are all you need for CORS support 
    $httpProvider.defaults.useXDomain = true; 
    $httpProvider.defaults.withCredentials = true; 
    delete $httpProvider.defaults.headers.common['X-Requested-With']; 
    }

这是所有你需要有让所有HTTP请求与CORS一起工作。这当然假定你做了你的后端。

根据XMLHTTPRequest的w3c规范，您不能添加这些附加标头，因为它们只能由主机浏览器添加。

答

PaulT的回答让我非常接近为自己解决这个问题，但我也必须明确地为我的发布操作添加Content-Type。

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';

希望这有助于。

答

我得到了它只需添加JSONP作为

$resource( ' http://maps.google.com/maps/api/geocode/json?address=:address&sensor=false ', {}, { get: { method: 'JSONP', } });

$ http.post请求标头字段Access-Control-Allow-Headers错误不允许Access-Control-Allow-Origin

相关推荐