Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers
I'm trying to send files to my server with a post request, but when it sends it causes the error:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers.
So I googled the error and added the headers:
$http.post($rootScope.URL, {params: arguments}, {headers: {
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Methods" : "GET,POST,PUT,DELETE,OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
Then I get the error:
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers
So I googled that and the only similar question I could find was provided a half answer then closed as off topic. What headers am I supposed to add/remove?
I had the same problem. In the jQuery documentation I found:
For cross-domain requests, setting the content type to anything other than
application/x-www-form-urlencoded
,multipart/form-data
, ortext/plain
will trigger the browser to send a preflight OPTIONS request to the server.
So though the server allows cross origin request but does not allow Access-Control-Allow-Headers
, it will throw errors. By default angular content type is application/json
, which is trying to send a OPTION request. Try to overwrite angular default header or allow Access-Control-Allow-Headers
in server end. Here is an angular sample:
$http.post(url, data, {
headers : {
'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
}
});
The server (that the POST request is sent to) needs to include the Access-Control-Allow-Headers
header (etc) in its response. Putting them in your request from the client has no effect.
This is because it is up to the server to specify that it accepts cross-origin requests (and that it permits the Content-Type
request header, and so on) – the client cannot decide for itself that a given server should allow CORS.