How to Fix CORS Errors in the Browser

TL;DR

• Bottom line: CORS errors are always a server-side configuration problem. The browser is working correctly — it enforces the Same-Origin Policy. Fix: add the correct Access-Control-Allow-Origin (and related) headers to the server's response.
• Key tool/command: DevTools → Network tab → click the failed request → Response Headers → look for Access-Control-Allow-Origin. Missing or wrong? That's your fix target.
• Watch out for: Access-Control-Allow-Origin: * cannot be combined with Access-Control-Allow-Credentials: true. Echo the specific origin instead. Also, the Authorization header is never covered by the * wildcard in Access-Control-Allow-Headers — it must be listed explicitly.
• Works with: All modern browsers (Chrome, Firefox, Safari, Edge). Applies to Fetch API, XMLHttpRequest, and any browser-initiated cross-origin request. Chrome 130+ also enforces Private Network Access preflights.

Constraints

• Never combine wildcard origin with credentials: Access-Control-Allow-Origin: * + Access-Control-Allow-Credentials: true is rejected by all browsers. Echo the specific requesting origin and add Vary: Origin. [src1, src4]
• CORS headers belong on the server response only: Adding Access-Control-Allow-Origin to a fetch() request header does nothing — the browser sets Origin automatically and checks response headers. [src1, src2]
• Error responses must include CORS headers: If your server returns 4xx/5xx without CORS headers, the browser blocks the error response and you see a generic CORS failure. Use always in nginx or ensure middleware runs unconditionally. [src3, src4]
• Private Network Access (Chrome 130+): Public websites accessing localhost or private IPs must respond to preflight with Access-Control-Allow-Private-Network: true. Without this, Chrome blocks the request entirely. [src7]
• Authorization header requires explicit listing: The * wildcard in Access-Control-Allow-Headers does not cover Authorization — you must list it explicitly. [src1, src6]
• Cross-origin cookies need SameSite=None; Secure: Even with correct CORS headers, cookies won't be sent cross-origin in Chrome 80+ unless they have both attributes set. [src1, src4]

Quick Reference

Decision Tree

START — Browser shows CORS error
├── DevTools → Network → find the failed request
│   ├── Preflight OPTIONS request present?
│   │   ├── YES — OPTIONS fails (4xx or no CORS headers)
│   │   │   ├── 404/405 on OPTIONS → add OPTIONS handler [src1, src6]
│   │   │   ├── "No Access-Control-Allow-Private-Network" → add PNA header [src7]
│   │   │   └── OPTIONS ok but actual fails → check Allow-Methods/Headers [src1]
│   │   └── NO — Simple request
│   │       ├── No Access-Control-Allow-Origin → add to server [src1, src3]
│   │       ├── Wrong origin → fix allowlist [src1, src4]
│   │       └── Has * but credentials → echo specific origin [src1, src4]
├── Request includes cookies / Authorization?
│   ├── YES → specific origin (not *) + Allow-Credentials: true
│   │         + explicit Authorization in Allow-Headers [src1, src4, src6]
│   └── NO → Wildcard * is fine for public APIs [src1, src5]
├── Custom header blocked (Authorization, X-API-Key)?
│   └── Add to Access-Control-Allow-Headers (Authorization always explicit) [src1, src3]
├── Public site accessing localhost / private IP?
│   └── Add Access-Control-Allow-Private-Network: true [src7]
└── Development only? → Use dev proxy (Vite/webpack) [src3, src5]

Step-by-Step Guide

1. Diagnose the exact error

Read the browser console — the message tells you exactly what's missing. [src1, src3]

# Common messages:
"No 'Access-Control-Allow-Origin' header is present"
→ Server doesn't send the header at all

"The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin"
→ Server sends wrong origin

"Response to preflight request doesn't pass access control check"
→ Server doesn't handle OPTIONS preflight

"The value of 'Access-Control-Allow-Origin' must not be '*' when credentials mode is 'include'"
→ Wildcard + credentials conflict

"No 'Access-Control-Allow-Private-Network' header was present in the preflight response"
→ Private Network Access preflight missing [src7]

2. Fix on the server — Express.js (Node.js)

The cors npm package is the standard solution. [src1, src3, src4]

const cors = require('cors');
const allowedOrigins = ['https://app.example.com', 'https://www.example.com'];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin || allowedOrigins.includes(origin)) return callback(null, true);
    callback(new Error(`CORS: origin ${origin} not allowed`));
  },
  methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-API-Key'],
  credentials: true,
  maxAge: 86400,
}));
app.options('*', cors());  // Handle preflight for all routes

3. Fix on the server — nginx

Configure CORS headers in nginx for any backend. [src1, src3]

location /api/ {
    set $cors_origin "";
    if ($http_origin ~* "^https://(app|www)\.example\.com$") {
        set $cors_origin $http_origin;
    }
    add_header 'Access-Control-Allow-Origin' $cors_origin always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
    add_header 'Vary' 'Origin' always;

    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Max-Age' '86400';
        add_header 'Content-Length' '0';
        return 204;
    }
    proxy_pass http://backend:8080;
}

4. Fix on the server — Python (FastAPI / Flask)

Standard CORS middleware for Python frameworks. [src1, src4]

# FastAPI
from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(CORSMiddleware,
    allow_origins=["https://app.example.com"],
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "DELETE", "OPTIONS"],
    allow_headers=["Content-Type", "Authorization"],
    max_age=86400)

# Flask
from flask_cors import CORS
CORS(app, origins=["https://app.example.com"],
     supports_credentials=True,
     allow_headers=["Content-Type", "Authorization"])

5. Development proxy (Vite / webpack)

Never disable browser security. Use a dev proxy instead. [src3, src5]

// vite.config.js
export default {
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
};

6. Client-side: sending credentials correctly

Credentials must be explicitly requested on the client. [src1, src4]

// Include cookies and auth headers cross-origin
fetch('https://api.example.com/data', {
  credentials: 'include',
  headers: { 'Authorization': 'Bearer token123' },
});

// axios
axios.get('https://api.example.com/data', { withCredentials: true });

7. Handle Private Network Access (Chrome 130+)

Public websites accessing localhost/private IPs need PNA headers. [src7]

// Express middleware for Private Network Access
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.headers['access-control-request-private-network'] === 'true') {
    res.header('Access-Control-Allow-Private-Network', 'true');
  }
  if (req.method === 'OPTIONS') return res.sendStatus(204);
  next();
});

Code Examples

Express.js — production CORS middleware

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

const allowedOrigins = [
  'https://app.example.com',
  'https://www.example.com',
];

app.use(cors({
  origin: (origin, callback) => {
    if (!origin) return callback(null, true);
    if (allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error(`CORS: origin ${origin} not allowed`));
    }
  },
  methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'X-API-Key'],
  credentials: true,
  maxAge: 86400,
}));

app.options('*', cors());

app.get('/api/data', (req, res) => {
  res.json({ data: 'hello' });
});

nginx — dynamic origin allowlist with preflight

server {
    listen 443 ssl;
    server_name api.example.com;

    location /api/ {
        set $cors_origin "";
        if ($http_origin ~* "^https://(app|www)\.example\.com$") {
            set $cors_origin $http_origin;
        }

        add_header 'Access-Control-Allow-Origin' $cors_origin always;
        add_header 'Access-Control-Allow-Credentials' 'true' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, PATCH, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With' always;
        add_header 'Access-Control-Max-Age' '86400' always;
        add_header 'Vary' 'Origin' always;

        if ($request_method = 'OPTIONS') {
            add_header 'Content-Length' '0';
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            return 204;
        }

        proxy_pass http://backend:8080;
    }
}

FastAPI — full CORS configuration

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=[
        "https://app.example.com",
        "https://www.example.com",
    ],
    allow_credentials=True,
    allow_methods=["GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"],
    allow_headers=["Content-Type", "Authorization", "X-API-Key"],
    max_age=86400,
)

@app.get("/api/data")
async def get_data():
    return {"data": "hello"}

Express.js — Private Network Access handler

// For local dev servers accessed from public websites (Chrome 130+)
const express = require('express');
const app = express();

app.use((req, res, next) => {
  const origin = req.headers.origin;
  res.header('Access-Control-Allow-Origin', origin || '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // Handle Private Network Access preflight
  if (req.headers['access-control-request-private-network'] === 'true') {
    res.header('Access-Control-Allow-Private-Network', 'true');
  }

  if (req.method === 'OPTIONS') return res.sendStatus(204);
  next();
});

Anti-Patterns

Wrong: Wildcard with credentials

Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true

Correct: Echo specific origin with credentials

// GOOD — reflect the specific requesting origin [src1, src4]
app.use(cors({
  origin: (origin, cb) => cb(null, allowedOrigins.includes(origin)),
  credentials: true,
}));
// Response: Access-Control-Allow-Origin: https://app.example.com
//           Access-Control-Allow-Credentials: true
//           Vary: Origin

Wrong: Disabling browser security for development

# BAD — dangerous, masks real issues [src3, src5]
chrome.exe --disable-web-security --user-data-dir="%TEMP%\chrome_dev"

Correct: Use a dev proxy

// GOOD — vite.config.js [src3, src5]
export default {
  server: {
    proxy: {
      '/api': { target: 'https://api.example.com', changeOrigin: true }
    }
  }
};

Wrong: Adding CORS headers on the client

// BAD — CORS headers are response headers; client can't set them [src1, src2]
fetch(url, {
  headers: {
    'Access-Control-Allow-Origin': '*',  // Does nothing!
  }
});

Correct: Fix the server response headers

// GOOD — CORS is always fixed on the server [src1, src2]
// In Express: app.use(cors({ origin: 'https://myapp.com' }))
// In nginx: add_header 'Access-Control-Allow-Origin' 'https://myapp.com' always;

Wrong: Using fetch mode 'no-cors' to silence errors

// BAD — gives opaque response you can't read [src1, src6]
const response = await fetch('https://api.example.com/data', {
  mode: 'no-cors',  // Silences error but response.json() will fail
});
// response.type === 'opaque', status === 0, body unreadable

Correct: Fix CORS on the server or use a proxy

// GOOD — fix the server, or proxy through your own backend [src1, src3]
// Option 1: Fix server CORS headers
// Option 2: Proxy through your own backend
const response = await fetch('/api/proxy/data');  // Same-origin, no CORS needed

Common Pitfalls

• CORS is enforced by the browser, not the server: Postman/curl always work because they don't enforce CORS. The server processes the request either way. [src1, src2]
• Missing Vary: Origin header: If your server echoes the requesting origin dynamically, add Vary: Origin to prevent CDNs from caching a response for one origin and serving it to another. [src1, src6]
• Preflight caching: Access-Control-Max-Age caches preflight results. Set to 0 during development; 86400 in production. Chrome caps this at 7200 (2h). [src1, src6]
• Error responses missing CORS headers: If your server returns 4xx/5xx without CORS headers, the browser blocks the error response. Use always in nginx or ensure middleware runs before error handlers. [src3, src4]
• Trailing slash / port mismatch: https://example.com ≠ https://example.com/ ≠ https://example.com:443. Origin comparison is exact. [src2, src3]
• Cookies require SameSite=None; Secure: For cross-origin cookies to be sent (Chrome 80+), they must have these attributes. Without them, credentials: 'include' sends no cookies. [src1, src4]
• Private Network Access surprises in development: Chrome 130+ sends PNA preflights when a public website accesses a private IP. If your local dev server doesn't handle Access-Control-Request-Private-Network, requests silently fail. [src7]
• Authorization header and the wildcard: Using Access-Control-Allow-Headers: * does not cover Authorization per the Fetch spec. Always list it explicitly. [src1, src6]

Diagnostic Commands

# Test CORS headers with curl (simple request)
curl -H "Origin: https://app.example.com" \
     -v https://api.example.com/data 2>&1 | grep -i "access-control"

# Test preflight request
curl -X OPTIONS \
     -H "Origin: https://app.example.com" \
     -H "Access-Control-Request-Method: POST" \
     -H "Access-Control-Request-Headers: Content-Type, Authorization" \
     -v https://api.example.com/data 2>&1 | grep -i "access-control"

# Test Private Network Access preflight (Chrome 130+)
curl -X OPTIONS \
     -H "Origin: https://public-site.com" \
     -H "Access-Control-Request-Method: GET" \
     -H "Access-Control-Request-Private-Network: true" \
     -v http://localhost:3000/api 2>&1 | grep -i "access-control"

# Check all response headers
curl -I -H "Origin: https://app.example.com" https://api.example.com/data

# Browser DevTools steps:
# 1. F12 → Network tab
# 2. Find failed request (red)
# 3. Click → Headers → Response Headers
# 4. Look for: Access-Control-Allow-Origin, Access-Control-Allow-Credentials
# 5. Find OPTIONS preflight above the main request (if any)

Server Configuration Quick Reference

Express (Node.js):    npm install cors → app.use(cors({ origin: '...', credentials: true }))
FastAPI (Python):     CORSMiddleware(allow_origins=[...], allow_credentials=True)
Flask (Python):       pip install flask-cors → CORS(app, origins=[...], supports_credentials=True)
Django (Python):      pip install django-cors-headers → CORS_ALLOWED_ORIGINS = [...]
Spring Boot (Java):   @CrossOrigin(origins = "...") or global CorsConfigurationSource bean
ASP.NET Core (C#):    builder.Services.AddCors(...) → app.UseCors("MyPolicy")
nginx:                add_header 'Access-Control-Allow-Origin' '...' always; add_header 'Vary' 'Origin' always;
Apache:               Header always set Access-Control-Allow-Origin "..."

Version History & Compatibility

When to Use / When Not to Use

Important Caveats

• CORS is not a security mechanism for your API: Anyone can call your API from curl or a server. Use authentication (JWT, API keys, sessions) to actually secure your API. [src8]
• Access-Control-Allow-Origin: * is safe for truly public APIs (open datasets, public weather data) but must never be used with credentials: true or for user-specific data. [src1, src8]
• Preflight requests count against rate limits: Use Access-Control-Max-Age to cache preflight results and reduce OPTIONS round-trips. [src1, src6]
• CORS errors on error responses: Middleware that only adds CORS headers on success will cause confusing CORS errors when the backend returns 4xx/5xx. Always use always in nginx. [src3, src4]
• WebSockets don't use CORS: They use the Origin header but have their own security model. [src1]
• fetch() mode 'no-cors' is a trap: It silences the CORS error but gives you an opaque response you can't read. Only useful for fire-and-forget requests. [src1, src6]
• Private Network Access is expanding: Chrome's PNA enforcement (Chrome 130+) adds a new class of CORS-like errors for public-to-private requests. This also covers WebSocket handshakes since Chrome 126. Expect other browsers to adopt this spec. [src7]