CORS Error Fix Guide — Solve Cross-Origin Request Blocked Errors

What Is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security mechanism that restricts HTTP requests made from one origin (domain + protocol + port) to a different origin. The same-origin policy prevents https://myapp.com from making API calls to https://api.other.com without explicit server permission.

CORS is enforced by the browser, not the server. If you make the same request from curl or Postman, CORS doesn't apply — it only blocks browser-initiated cross-origin requests. This means CORS errors always need to be fixed on the server side by returning the correct response headers.

How to Fix CORS Errors Step by Step

1. Read the browser console error — it tells you exactly which header is missing.
2. Identify the request type — simple requests vs. preflighted requests need different handling.
3. Add the correct headers on your server — Access-Control-Allow-Origin is the minimum required.
4. Handle OPTIONS preflight — servers must respond to OPTIONS requests with the appropriate CORS headers.
5. Test with the browser — not Postman (which ignores CORS).
6. Avoid wildcard with credentials — * and Access-Control-Allow-Credentials: true can't be combined.

Key CORS Headers

• Access-Control-Allow-Origin — specifies allowed origins. Use * for public APIs, or a specific origin like https://myapp.com for authenticated APIs.
• Access-Control-Allow-Methods — comma-separated allowed HTTP methods: GET, POST, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers — allowed request headers: Content-Type, Authorization
• Access-Control-Allow-Credentials — set to true to allow cookies and auth headers in cross-origin requests.
• Access-Control-Max-Age — how long preflight results can be cached (seconds): 86400 = 24 hours.

CORS Configuration Examples

Node.js with Express

const cors = require('cors');

// Allow all origins (public API)
app.use(cors());

// Allow specific origin
app.use(cors({
  origin: 'https://myapp.com',
  credentials: true,
  methods: ['GET','POST','PUT','DELETE'],
  allowedHeaders: ['Content-Type','Authorization']
}));

Nginx Configuration

add_header 'Access-Control-Allow-Origin' 'https://myapp.com';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

Use Cases

Frontend + Separate Backend API

The most common CORS scenario: a React app at localhost:3000 calling an Express API at localhost:5000. Different ports mean different origins — CORS must be configured on the backend to allow the frontend's origin.

Public API Serving Multiple Frontends

Public APIs that serve third-party frontends should use Access-Control-Allow-Origin: *. Never use wildcard with credentials enabled — this is a security risk and the browser will reject it anyway.

Frequently Asked Questions

Why do CORS errors only happen in the browser but not in Postman?

CORS is a browser security feature, not a server feature. The browser checks CORS headers and blocks the response if they're missing. Postman and curl make requests directly without browser security restrictions, so they never trigger CORS errors.

What is a preflight request?

For non-simple requests (POST/PUT/DELETE with JSON body, or requests with custom headers), browsers first send an OPTIONS request to ask the server if the actual request is allowed. This is the "preflight." The server must respond with appropriate CORS headers to the OPTIONS request.

Can I fix CORS on the frontend?

Not directly — CORS must be configured on the server. However, during development you can use a proxy: create a dev proxy in your frontend bundler (Vite, webpack, CRA) that forwards API requests to the backend, making them same-origin from the browser's perspective.

Is CORS a security feature or a bug?

It's a security feature. Without CORS, a malicious website could make authenticated API calls using your cookies/session to any site you're logged into. CORS enforces that only explicitly authorized origins can make cross-origin requests with credentials.

How do I allow multiple specific origins in CORS?

The Access-Control-Allow-Origin header only supports one origin value (or *). To allow multiple origins, dynamically check the request's Origin header against an allowlist and echo it back if it matches: if (allowedOrigins.includes(req.headers.origin)) { res.setHeader('Access-Control-Allow-Origin', req.headers.origin); }