Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers

Question

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?

Answer 1

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, or text/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'
    }
});