🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

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 with a half answer then closed as off-topic. What headers am I supposed to add/remove?
angularjs javascript
by

3 Answers

akshay1995
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.
sandhya6gczb
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 requests but does not allow Access-Control-Allow-Headers, it will throw errors. By default, the 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'

    }

});
pankajshivnani123
If that helps anyone, (even if this is kind of poor as we must only allow this for dev purpose) here is a Java solution as I encountered the same issue. [Edit] Do not use the wild card * as it is a bad solution, use localhost if you really need to have something working locally.


public class SimpleCORSFilter implements Filter {



public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

    HttpServletResponse response = (HttpServletResponse) res;

    response.setHeader("Access-Control-Allow-Origin", "my-authorized-proxy-or-domain");

    response.setHeader("Access-Control-Allow-Methods", "POST, GET");

    response.setHeader("Access-Control-Max-Age", "3600");

    response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");

    chain.doFilter(req, res);

}



public void init(FilterConfig filterConfig) {}



public void destroy() {}



}

Login / Signup to Answer the Question.

LoginSignup