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

User · Answer

If you are using localhost and PHP set to this to solve the issue   header  Access-Control-Allow-Origin       header  Access-Control-Allow-Headers  Content-Type       From your front-end use    headers    Content-Type    application json      and boom no more issues from localhost

User · Answer

For me  Added the following to my server s web config file   lt system webServer gt       lt httpProtocol gt           lt customHeaders gt               lt add name  quot Access-Control-Allow-Origin quot  value  quot https   other domain com quot    gt               lt add name  quot Access-Control-Allow-Methods quot  value  quot GET POST OPTIONS PUT DELETE quot    gt               lt add name  quot Access-Control-Allow-Headers quot  value  quot Content-Type X-Requested-With quot    gt           lt  customHeaders gt       lt  httpProtocol gt   lt system webServer gt

User · Answer

In Asp Net Core  to quickly get it working for development  in Startup cs  Configure method add  app UseCors options   gt  options AllowAnyOrigin   AllowAnyMethod   AllowAnyHeader

User · Answer

The server  that the POST request is sent to  needs to include the Content-Type header in its response   Here s a list of typical headers to include  including one custom  X ACCESS TOKEN  header    X-ACCESS TOKEN    Access-Control-Allow-Origin    Authorization    Origin    x-requested-with    Content-Type    Content-Range    Content-Disposition    Content-Description    That s what your http server guy needs to configure for the web server that you re sending your requests to   You may also want to ask your server guy to expose the  Content-Length  header   He ll recognize this as a Cross-Origin Resource Sharing  CORS  request and should understand the implications of making those server configurations   For details see    http   www w3 org TR cors  http   enable-cors org

User · Answer

In my case  I m receiving several parameters as  HeaderParam into a web service method   These parameters MUST be declared in your CORS filter that way    Provider public class CORSFilter implements ContainerResponseFilter         Override     public void filter ContainerRequestContext requestContext  ContainerResponseContext responseContext  throws IOException            MultivaluedMap lt String  Object gt  headers   responseContext getHeaders             headers add  Access-Control-Allow-Origin                             headers add  Access-Control-Allow-Headers                          name of the  HeaderParam  name   must be declared here  raw String                        name                 headers add  Access-Control-Allow-Credentials    true            headers add  Access-Control-Allow-Methods    GET  POST  PUT  DELETE  OPTIONS  HEAD

User · Answer

You can activate the proper header in PHP with this   header  Access-Control-Allow-Origin       header  Access-Control-Allow-Methods  GET  POST  OPTIONS  PUT  DELETE    header  Access-Control-Allow-Headers  Content-Type  Access-Control-Allow-Headers  X-Requested-With

User · Answer

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

User · Answer

this is backend problem  if use sails api on backend change cors js and add your filed here  module exports cors       allRoutes  true    origin         credentials  true    methods   GET  POST  PUT  DELETE  OPTIONS  HEAD     headers   Origin  X-Requested-With  Content-Type  Accept  Engaged-Auth-Token

User · Answer

Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers error means that Access-Control-Allow-Origin field of HTTP header is not handled or allowed by response  Remove Access-Control-Allow-Origin field from the request header

User · Answer

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

User · Answer

The headers you are trying to set are response headers  They have to be provided  in the response  by the server you are making the request to    They have no place being set on the client  It would be pointless having a means to grant permissions if they could be granted by the site that wanted permission instead of the site that owned the data

User · Answer

if you testing some javascript requests for ionic2 or angularjs 2   in your chrome on pc or mac   then be sure that you install CORS plugin for chrome browser to allow cross origin     mayba get requests will work without needing that   but post and puts and delete will need you to install cors plugin for testing to go without problems   that definitley not cool   but i do not know how people do it without CORS plugin     and also be sure the json response is not returning 400 by some json status

User · Answer

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

User · Answer

The following works for me with nodejs   xServer use function req  res  next      res setHeader  Access-Control-Allow-Origin    http   localhost 8080      res setHeader  Access-Control-Allow-Methods    POST GET OPTIONS PUT DELETE      res setHeader  Access-Control-Allow-Headers    Content-Type Accept       next

User · Answer

If anyone experiences this problem with an express server  add the following middleware   app use function req  res  next      res header  Access-Control-Allow-Headers    Origin  X-Requested-With  Content-Type  Accept      next

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

Examples related to javascript

Examples related to angularjs

Examples related to post

Examples related to header

Examples related to cors