Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response

Question

I have come across CORS issues multiple times and can usually fix it but I want to really understand by seeing this from a MEAN stack paradigm    Before I simply added middleware in my express server to catch these things  but it looks like there is some kind of pre-hook that is erroring out my requests       Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response   I assumed that I could do this   app use function req  res  next      res header  Access-Control-Allow-Headers            or the equivalent but this doesn t seem to fix it  I also of course tried  app use function req  res  next      res header  Access-Control-Allow-Headers   Access-Control-Allow-Headers        Still no luck

User · Answer

this problem occurs when we make custom header for request.This request that uses the HTTP OPTIONS and includes several headers.

The required header for this request is Access-Control-Request-Headers , which should be part of response header and should allow request from all the origin. Sometimes it needs Content-Type as well in header of response. So your response header should be like that -

response.header("Access-Control-Allow-Origin", "*"); // allow request from all origin
response.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.header("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept, Authorization");

User · Answer

When you start playing around with custom request headers you will get a CORS preflight  This is a request that uses the HTTP OPTIONS verb and includes several headers  one of which being Access-Control-Request-Headers listing the headers the client wants to include in the request   You need to reply to that CORS preflight with the appropriate CORS headers to make this work  One of which is indeed Access-Control-Allow-Headers  That header needs to contain the same values the Access-Control-Request-Headers header contained  or more    https   fetch spec whatwg org  http-cors-protocol explains this setup in more detail

User · Answer

Message is clear that  Authorization  is not allowed in API  Set Access-Control-Allow-Headers   Content-Type  Authorization

User · Answer

After spending almost a day  I just found out that adding the below two codes solved my issue   Add this in the Global asax  protected void Application BeginRequest       if  Request HttpMethod     OPTIONS           Response StatusCode    int System Net HttpStatusCode OK                   Response End            and in the web config add the below   lt httpProtocol gt     lt customHeaders gt       lt add name  Access-Control-Allow-Origin  value       gt               lt add name  Access-Control-Allow-Methods  value       gt       lt add name  Access-Control-Allow-Headers  value  Content-Type  Authorization    gt     lt  customHeaders gt   lt  httpProtocol gt

User · Answer

The accepted answer is ok  but I had difficulties to understand it  So here is a simple example to clarify it   In my ajax request I had a standard Authorization header       document  on  ajaxStart   function e   var auth token   localStorage getItem SB TOKEN MOBILE   if  auth token         var xhr   e detail xhr       xhr setRequestHeader    Authorization      Bearer     auth token       This code produces the error in the question  What I had to do in my nodejs server was to add Authorization in allowed headers   res setHeader  Access-Control-Allow-Headers    X-Requested-With content-type   Authorization

User · Answer

Very good i used this on a silex project   app- gt after function  Request  request  Response  response             response- gt headers- gt set  Access-Control-Allow-Origin                  response- gt headers- gt set  Access-Control-Allow-Credentials    true             response- gt headers- gt set  Access-Control-Allow-Methods    GET HEAD OPTIONS POST PUT             response- gt headers- gt set  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept  Authorization

User · Answer

In Post API call we are sending data in request body  So if we will send data by adding any extra header to an API call  Then first OPTIONS API call will happen and then post call will happen  Therefore  you have to handle OPTION API call first   You can handle the issue by writing a filter and inside that you have to check for option call API call and return a 200 OK status  Below is the sample code   package com web filter   import java io IOException   import javax servlet Filter  import javax servlet FilterChain  import javax servlet FilterConfig  import javax servlet ServletException  import javax servlet ServletRequest  import javax servlet ServletResponse  import javax servlet http HttpServletRequest  import javax servlet http HttpServletResponse   import org apache catalina connector Response   public class CustomFilter implements Filter       public void doFilter ServletRequest req  ServletResponse res  FilterChain chain              throws IOException  ServletException           HttpServletResponse response    HttpServletResponse  res          HttpServletRequest httpRequest    HttpServletRequest  req          response setHeader  Access-Control-Allow-Origin                 response setHeader  Access-Control-Allow-Methods    POST  GET  PUT  OPTIONS  DELETE            response setHeader  Access-Control-Max-Age    3600            response setHeader  Access-Control-Allow-Headers    x-requested-with  Content-Type            if  httpRequest getMethod   equalsIgnoreCase  OPTIONS                  response setStatus Response SC OK                     chain doFilter req  res              public void init FilterConfig filterConfig               TODO            public void destroy                Todo

User · Answer

Just to add that you can put those headers also to Webpack config file  I needed them as in my case as I was running webpack dev server  devServer        headers           quot Access-Control-Allow-Origin quot    quot   quot          quot Access-Control-Allow-Credentials quot    quot true quot          quot Access-Control-Allow-Methods quot    quot GET HEAD OPTIONS POST PUT quot          quot Access-Control-Allow-Headers quot    quot Origin  X-Requested-With  Content-Type  Accept  Authorization quot

User · Answer

const express   require  express   const cors   require  cors   const app   express    app get   with-cors   cors     req  res  next    gt      res json   msg   WHOAH with CORS it works             Adding cors in get function Is what worked for me

User · Answer

This problem solved with     Origin  X-Requested-With  Content-Type  Accept  Authorization    Particular in my project  express js nodejs    app use function req  res  next      res header  Access-Control-Allow-Origin           res header  Access-Control-Allow-Methods    GET HEAD OPTIONS POST PUT      res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept  Authorization      next          Update     Every time error  Access-Control-Allow-Headers is not allowed by itself in preflight response error you can see what wrong with chrome developer tool    above error is missing Content-Type so add string Content-Type to Access-Control-Allow-Headers

User · Answer

I just ran into this issue myself  in the context of ASP NET make sure your Web config looks like this       lt system webServer gt   lt modules gt     lt remove name  FormsAuthentication    gt   lt  modules gt    lt handlers gt     lt remove name  ExtensionlessUrlHandler-Integrated-4 0    gt     lt  -- lt remove name  OPTIONSVerbHandler   gt -- gt     lt remove name  TRACEVerbHandler    gt     lt  --    lt add name  ExtensionlessUrlHandler-Integrated-4 0  path      verb     type  System Web Handlers TransferRequestHandler  preCondition  integratedMode runtimeVersionv4 0    gt    -- gt   lt  handlers gt    lt httpProtocol gt     lt customHeaders gt       lt add name  Access-Control-Allow-Origin  value       gt       lt add name  Access-Control-Allow-Headers  value  Content-Type  Authorization    gt       lt add name  Access-Control-Allow-Methods  value  GET  POST  PUT  DELETE  OPTIONS    gt     lt  customHeaders gt   lt  httpProtocol gt      Notice the Authorization value for the Access-Control-Allow-Headers key  I was missing the Authorization value  this config solves my issue

User · Answer

That same issue i was facing   I did a simple change      lt modulename gt  config function  httpProvider       delete  httpProvider defaults headers common  X-Requested-With

User · Answer

If you are trying to add a custom header on the request headers  you have to let the server know that specific header is allowed to take place  The place to do that is in the class that filters the requests  In the example shown below  the custom header name is  type    public class CorsFilter implements Filter        Override     public void doFilter ServletRequest req  ServletResponse res  FilterChain chain  throws IOException  ServletException           HttpServletRequest request    HttpServletRequest  req          HttpServletResponse response    HttpServletResponse  res          response setHeader  Access-Control-Allow-Origin    request getHeader  Origin             response setHeader  Access-Control-Allow-Credentials    true            response setHeader  Access-Control-Allow-Methods    GET PUT POST DELETE PATCH OPTIONS            response setHeader  Access-Control-Max-Age    3600            response setHeader  Access-Control-Allow-Headers    Content-Type  Accept  X-Requested-With  remember-me  Authorization  type             response setHeader  Access-Control-Expose-Headers   Authorization

User · Answer

res setHeader  Access-Control-Allow-Headers

User · Answer

This is what you need to add to make it work   response setHeader  Access-Control-Allow-Origin         response setHeader  Access-Control-Allow-Credentials    true    response setHeader  Access-Control-Allow-Methods    GET HEAD OPTIONS POST PUT    response setHeader  Access-Control-Allow-Headers    Access-Control-Allow-Headers  Origin Accept  X-Requested-With  Content-Type  Access-Control-Request-Method  Access-Control-Request-Headers      The browser sends a preflight request  with method type OPTIONS  to check if the service hosted on the server is allowed to be accessed from the browser on a different domain  In response to the preflight request if you inject above headers the browser understands that it is ok to make further calls and i will get a valid response to my actual GET POST call  you can constraint the domain to which access is granted by using Access-Control-Allow-Origin    localhost  xvz com  instead of         will grant access to all domains

User · Answer

I too faced the same problem in Angular 6  I solved the issue by using below code  Add the code in component ts file   import   HttpHeaders   from   angular common http    headers   constructor         this headers   new HttpHeaders        this headers append  Access-Control-Allow-Headers    Authorization       getData         this http get url this headers   subscribe  res   gt           your code here

User · Answer

In Chrome      Request header field X-Requested-With is not allowed by   Access-Control-Allow-Headers in preflight response    For me  this error was triggered by a trailing space in the URL of this call   jQuery getJSON  url  function  response  status  xhr

User · Answer

I received the error the OP stated using Django  React  and the django-cors-headers lib   To fix it with this stack  do the following   In settings py add the below per the official documentation   from corsheaders defaults import default headers  CORS ALLOW HEADERS   default headers      YOUR HEADER NAME

User · Answer

To add to the other answers  I had the same problem and this is the code i used in my express server to allow REST calls   app all      function req  res  next      res header  Access-Control-Allow-Origin    URLs to trust of allow      res header  Access-Control-Allow-Methods    GET  POST  OPTIONS  PUT  PATCH  DELETE      res header  Access-Control-Allow-Headers    Content-Type      if   OPTIONS     req method      res sendStatus 200       else       next              What this code basically does is intercepts all the requests and adds the CORS headers  then continue with my normal routes  When there is a OPTIONS request it responds only with the CORS headers   EDIT  I was using this fix for two separate nodejs express servers on the same machine  In the end I fixed the problem with a simple proxy server

[express] Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response

Examples related to express

Examples related to cors

Examples related to meanjs