Skip to main content

How to Resolve the "Request header field ... is not allowed" CORS Error in JavaScript

One of the most common and frustrating Cross-Origin Resource Sharing (CORS) errors developers encounter is: "Request header field [Some-Header] is not allowed by Access-Control-Allow-Headers in preflight response." This error most frequently appears when you add an Authorization header for authentication, but it can happen with any custom HTTP header.

This guide will explain what this error means, why it happens, and how to fix it correctly on your server.

The Core Concept: Understanding the Preflight OPTIONS Request​

This error occurs because of a security mechanism built into browsers. For any "complex" cross-origin request, the browser sends a preflight request before the actual request.

Think of it like the browser politely asking for permission:

Browser: "Hello Server, I'm about to send you a PUT request from a different origin, and I plan to include custom headers like Content-Type and Authorization. Are you okay with that?"

This "permission slip" request is sent using the OPTIONS HTTP method. The server is then expected to respond to this OPTIONS request with a list of allowed methods and headers.

The error you are seeing means the server's response to this OPTIONS request did not include the specific header (e.g., Authorization) that the browser wanted to send. The browser, seeing that permission was not granted, blocks the actual request from ever being sent.

The Solution: Configuring the Server Response Headers​

The fix for this error is always on the server-side. You need to configure your server to respond to the OPTIONS preflight request with the correct Access-Control-Allow-* headers.

Problem: your client-side code is trying to send a request with a custom Authorization header.

// Client-Side Code
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE',
  },
});
note

The browser sees the Authorization header and sends a preflight OPTIONS request. The server's response is missing Authorization in its list of allowed headers, causing the error.

Your server must be configured to send back the following headers in response to the OPTIONS request:

Access-Control-Allow-Origin: https://your-frontend-domain.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
note

The two most critical headers to fix this specific error are:

  1. Access-Control-Allow-Headers: This header must include a comma-separated list of all the custom headers your client is allowed to send. To fix the error, you must add Authorization to this list.
  2. Access-Control-Allow-Methods: This header must include OPTIONS in its list, in addition to the actual methods your API supports (like GET, POST, etc.).

Practical Example: A Standard Express.js CORS Configuration​

If you are using Node.js with Express, the cors middleware is the standard and easiest way to manage this.

Installation​

npm install cors

The Solution​

This is a standard, secure configuration that solves the "Authorization not allowed" error.

const express = require('express');
const cors = require('cors');
const app = express();

const corsOptions = {
  // Your client's origin
  origin: 'http://localhost:3000', 
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization'],
};

// Enable CORS with these options
app.use(cors(corsOptions));

// Your API routes
app.get('/products', (req, res) => {
  res.json({ msg: 'This is CORS-enabled!' });
});

app.listen(5000, () => {
  console.log('CORS-enabled web server listening on port 5000');
});

This configuration explicitly tells the browser that requests from http://localhost:3000 are allowed, and that they are permitted to include the Content-Type and Authorization headers.

A Step-by-Step Debugging Checklist​

If you are still facing issues, use your browser's developer tools to debug:

  1. Open the Network tab in your browser's developer tools.
  2. Trigger your web request. You should see two requests: the first will have the method OPTIONS (the preflight), and the second will be your actual GET or POST request (which is likely grayed out or marked as failed).
  3. Click on the OPTIONS request.
  4. Look at the Request Headers section. Find the Access-Control-Request-Headers header. This is the list of headers your browser is asking permission for (e.g., authorization, content-type).
  5. Now look at the Response Headers section from the server. Find the Access-Control-Allow-Headers header.
  6. Compare them. The list in the response header from your server must contain all of the headers that were requested by the browser. If it doesn't, the browser will throw the error.

Conclusion​

The "Request header field ... is not allowed" error is a direct result of a server's security policy being too restrictive for the browser's preflight OPTIONS request.

To solve this error:

  • Modify your server's configuration, not your client's.
  • Ensure the Access-Control-Allow-Headers response header includes the specific header the browser is requesting (e.g., Authorization).
  • Ensure the Access-Control-Allow-Methods response header includes OPTIONS.

By correctly configuring your server to handle preflight requests, you can resolve this common CORS error.

Table of Contents