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

javascript

cors

preflight-requests

access-control-allow-headers

byNikita Barsukov·Mar 5, 2025

To resolve the Access-Control-Allow-Headers issue, you need to configure your server properly to accept the client's headers. Here is how you can accomplish that using middleware in Node.js with Express:

app.use((req, res, next) => {
  // Allowing all origins, choose yours: http://war-of-the-worlds.com
  res.header('Access-Control-Allow-Origin', '*'); 
  // Tony Stark permits these headers only, add yours
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); 
  next();
});

This configuration allows the server to send back the approved headers, such as Content-Type and Authorization, and provides a simple method of managing CORS issues. Adjust for your specific requirements.

Cruise through CORS and preflight

Embarking on preflight

When your application needs to request resources from a different domain, CORS comes into play. Preflight requests, made using the OPTIONS method, are meant to ensure the server is comfortable with the headers and HTTP methods that will subsequently be used.

Server-side adjustments, a la carte

Whatever language or framework you're using, there'll likely exist methods to adjust these headers:

In Node.js (Express), it's shown above.
In Java (Spring), you can use a SimpleCORSFilter.
For PHP, the header() function does all the magic.

Decoding content types and Request handling

Content type: Your postman's guide

Preflight requests are triggered when there's a 'non-simple' content type like application/json. To avoid preflight, use application/x-www-form-urlencoded; charset=UTF-8 with Angular's $http.post. When using jQuery, its documentation provides poignant insights for handling such content types.

Defining borders: Domain control

For a dash of added security, define domains with Access-Control-Allow-Origin rather than resorting to a wildcard (*). This makes sure that only your kind of people (predefined domains) can interact with your resources.

Buffing your code with best practices

Avenues of access: Headers and Methods

To avoid crying wolf at your server, indicate the HTTP methods intended for use in Access-Control-Allow-Methods. Include headers like Content-Type and X-Requested-With in Access-Control-Allow-Headers.

Preflight Caching: Less Talk, More Work

Reduce the number of interruptions (preflight requests) by using Access-Control-Max-Age. This defines how long your server should remember the outcome of a preflight request.

Mirror, mirror: Server Responses and Exposed Headers

Ensuring that the Content-Type in the server's responses for POST requests is like checking yourself in the mirror before stepping out. Similarly, expose headers like Content-Length to convey more about the server's response to the client.

Platform specific CORS

Older kids on the block, like Android WebView, may require special attention to the headers in preflight responses. You can find more on how to deal with this at http://enable-cors.org/.

Deep dive into CORS

For a deeper understanding of CORS specifics like how browsers handle cross-origin requests, reference comprehensive guides such as http://www.w3.org/TR/cors/.

explain-codes / Javascript / Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers

Linked

Access Control Request Headers, is added to header in AJAX request with jQuery



Enabling CORS in Cloud Functions for Firebase



Response to preflight request doesn't pass access control check - No 'Access-Control-Allow-Origin' header



How does the 'Access-Control-Allow-Origin' header work?



Jquery AJAX Cross Domain

