Question

我正在使用Ionic Framework处理应用。

在后端我为api写了一个Flask应用程序，如下所示：

@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.

我用谷歌搜索了然后我发现了这个片段：

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

我还在我的nginx conf中添加了标题，如下所示：

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

尝试了那些文档中的所有内容以及我在谷歌上发现的内容，但遗憾的是它并没有做任何好处。

如何为所有来源设置正确的标题？我也使用google 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

Answer 1

在我的app模块配置部分，我有以下内容：

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规范，不允许添加这些附加标头，因为它们可能只能由主机浏览器添加。

Answer 2

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

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

希望这有帮助。

Answer 3

我通过添加JSONP作为方法

来实现它

$资源（＆＃39; http://maps.google.com/maps/api/geocode/json?address=:address&sensor=false＆＃39 ;, {}， { 得到：{ 方法：＆＃39; JSONP＆＃39;， } }）;

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

3 个答案: