$ http.post Access-Control-Allow-Origin request header field not allowed by error Access-Control-Allow-Headers
I am working on an application using the Ionic Framework.
On the backend I wrote a flask api app that looks like this:
@API.route("/saverez",methods=["POST","OPTIONS"])
@crossdomain(origin='*', headers="*",methods="*")
@render_api
def saver():
.....
I got errors when sending 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 an 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 and then found this snippet:
http://flask.pocoo.org/snippets/56/
I have also added headers to my nginx as shown below:
location ~* \.(eot|ttf|woff)$ {
add_header Access-Control-Allow-Origin *;
}
Tried everything in this documentation as well as what I found on google but unfortunately it didn't do much good.
How can I set the correct headers for all sources? I am also using google pagespeed, could this cause this problem?
Thanks in advance.
--- EDIT --- Chrome Internet 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
source to share
In my application 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's all you need to make all HTTP requests work with CORS. This assumes, of course, that you've made your server.
You added that these additional headers will not be allowed according to the w3c spec for XMLHTTPRequest as they can only be added by the host browser.
source to share
I got it just by adding JSONP as a method
$ resources (' http://maps.google.com/maps/api/geocode/json?address=:address&sensor=false ', {}, {get: {method: "JSONP",}});
source to share