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

Question

I'm working on a app using Ionic Framework.

On the backend i wrote a Flask Application for api which looks like below:

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

I got errors while posting json to 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);
                });

So this gives me the error:

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

I googled it and then i found this snippet:

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

I also added headers to my nginx conf like below:

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

Tried everything in that documentation and also evertyhing i found on google but sadly it didn't do any good.

How can i set the right headers for all origins ? I also use google pagespeed does it can cause this issue ?

Thanks in advance.

--- EDIT --- Chrome network output

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

In my app module config section I have the following:

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'];
  }

That is all you need to have to make all the HTTP requests work with CORS. This of course assumes you have made your backend.

You adding those additional headers would not be allowed according the w3c specification for XMLHTTPRequest as they may only be added by the host browser.

Answer 2

PaulT's answer got me very close to solving this problem for myself, but I also had to explicitly add the Content-Type for my post operations.

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

Hope this helps.

Answer 3

I got it working by just adding JSONP as the method

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