Request Header Field Access-Control-Allow-Headers Is Not Allowed by Access-Control-Allow-Headers

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

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. You should remove the 'Access-Control-Allow-...' headers from your POST request.

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.

The requestor (web browser) may 'preflight' test what the server's Same Origin Policy is by sending an 'OPTIONS' request (ie not the 'POST' or 'GET' request you intend). If the response to the 'OPTIONS' request contains 'Access-Control-Allow-...' headers that permit the headers, origin, or methods your request is using, then the requester/browser will send your 'POST' or 'GET' request.

(obscure note:) The Access-Control-Allow-... have the value '' rather than listing the specific origin, headers, or methods allowed. However, and old Android WebView client I was using didn't honor the '' wildcard and needed the specific headers listed in the Access-Control-Allow-Headers header in the response to the OPTIONS request.

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

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.

“Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response” despite valid CORS config

Drop the part of your frontend code that adds a Access-Control-Allow-Origin header.

Never add Access-Control-Allow-Origin as a request header in your frontend code.

The only effect that’ll ever have is a negative one: it’ll cause browsers to do CORS preflight OPTIONS requests even in cases when the actual (GET, POST, etc.) request from your frontend code would otherwise not trigger a preflight. And then the preflight will fail with this message:

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

…that is, it’ll fail with that unless the server the request is being made to has been configured to send an Access-Control-Allow-Headers: Access-Control-Allow-Origin response header.

But you never want Access-Control-Allow-Origin in the Access-Control-Allow-Headers response-header value. If that ends up making things work, you’re actually just fixing the wrong problem. Because the real fix is: never set Access-Control-Allow-Origin as a request header.

Intuitively, it may seem logical to look at it as “I’ve set Access-Control-Allow-Origin both in the request and in the response, so that should be better than just having it in the response” — but it’s actually worse than only setting it in the response (for the reasons described above).

So the bottom line: Access-Control-Allow-Origin is solely a response header, not a request header. You only ever want to set it in server-side response code, not frontend JavaScript code.


The code in the question was also trying to add an Origin header. You also never want to try to set that header in your frontend JavaScript code.

Unlike the case with the Access-Control-Allow-Origin header, Origin is actually a request header — but it’s a special header that’s controlled completely by browsers, and browsers won’t ever allow your frontend JavaScript code to set it. So don’t ever try to.

‘content-type’ is not allowed according to header ‘Access-Control-Allow-Headers’ from CORS preflight response

you are using the headers object incorrectly. content-type is separate. please use like so:

headers: {
"Access-Control-Allow-Headers": "*", // this will allow all CORS requests
"Access-Control-Allow-Methods": 'OPTIONS,POST,GET', // this states the allowed methods
"Content-Type": "application/json" // this shows the expected content type
},

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

Remove the Access-Control-Allow-Methods and the Access-Control-Allow-Headers from the HttpHeaders in the frontend code. These headers are supposed be sent as response headers from the server (which is what you are doing in your CORSResponseFilter).

Failed to load http://localhost:8080/ Request header field Access-Control-Allow-Methods is not allowed by Access-Control-Allow-Headers in preflight response

What this error is saying is that the server response header Access-Control-Allow-Headers doesn't include Access-Control-Allow-Methods in the header value (which is shouldn't). The purpose of the Access-Control-Allow-Headers is to tell the browser which request headers the client is allowed to send to the server. You can see in the CORSResponseFilter which headers you allow. Access-Control-Allow-Methods is not one of them.

And while your at it, you might as well remove all the Access-Control-XX-XX values in the Access-Control-Allow-Headers response header. These are not required. You are saying that client can send these request headers, which it shouldn't be doing.

See also:

  • Check out the update in this answer for a good explanation about how these headers work (if you are interested).

Django/React request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

You need to modify your settings.py to allow your frontend to access the service via CORS, make sure to add your correct frontend port:

# Add here your frontend URL
CORS_ALLOWED_ORIGINS = [
"http://localhost:3000",
]

Fetch API CORS error: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response

You need to set access-control-allow-headers in the preflight response, e.g.:

access-control-allow-headers: *

You can read more about Access-Control-Request-Headers and Access-Control-Allow-Headers

The headers

access-control-request-headers: *
access-control-request-method: GET, POST, PUT, PATCH, OPTIONS, DELETE

belong into the request, not into the response. You probably also need to set access-control-allow-methods in the preflight response, e.g.:

access-control-allow-methods: GET, POST, PUT, PATCH, OPTIONS, DELETE

Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response when using http get req from JS to SlackAPI

Following CBroe's advice, I was able to contact the Slack help center directly, so I asked this problem. What I found out as a result is that HTTP requests from browsers are not supported as of the end of February 2022. Of course, they have received quite a lot of requests regarding this, so they hope to address it at some point.

This time, the browser sent Access-Control-Request-Headers:Authorization in the preflight request. But the Slack API server side did not allow the Authorization header in the request from the browser. Therefore, Authorization was not set in the Access-Control-Allow-Headers in the preflight response from the Slack API side.

As a result, the response from the Slack API side returned Invalid Auth, even though Authorization was added as a header when making an actual request from the browser.

Through this error, I gained a deeper understanding of HTTP requests such as CORS and preflighting, but since it is not explicitly written on the official Slack website, I left it here.

  • What is Preflight: https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
  • What is Access-Control-Allow-Header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers
  • What is CORS simple request: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests


Related Topics



Leave a reply



Submit