How to Fix CORS Errors in Node.js, Express, and Next.js: The Complete Developer Guide

Every web developer has stared in frustration at the dreaded browser console error: "Access to fetch at 'https://api.example.com' from origin 'https://app.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource." Contrary to common belief, CORS is not a bug or a server crash; it is a critical browser-enforced security mechanism designed to protect users from malicious cross-site data theft. This guide deconstructs how CORS works and provides battle-tested production fixes for Node.js, Express, Next.js, and Nginx.

What Is CORS and Why Does the Browser Block Requests?

The Same-Origin Policy (SOP) is a foundational browser security standard. An origin is defined by the exact combination of Protocol + Domain + Port:

• https://example.com and https://api.example.com are different origins (different subdomains).
• https://example.com:3000 and https://example.com:8000 are different origins (different ports).
• http://example.com and https://example.com are different origins (different protocols).

Without CORS restrictions, a malicious website you visit in another tab could run JavaScript in your browser to send background requests to yourbank.com/api/transfer, automatically attaching your saved session cookies.

Simple Requests vs. Preflight OPTIONS Requests

The browser categorizes HTTP requests into two types:

How to Fix CORS in Express / Node.js (The Right Way)

A dangerous anti-pattern is blindly configuring app.use(cors({ origin: '*' })). If your frontend needs to send authentication cookies or authorization headers (credentials: 'include'), browsers will reject wildcards:

// server.ts (Express with Production-Grade CORS)
import express from 'express';
import cors from 'cors';

const app = express();

const allowedOrigins = [
  'https://nitaiitsolution.in',
  'https://app.nitaiitsolution.in',
  'http://localhost:3000' // Local development
];

app.use(cors({
  origin: (origin, callback) => {
    // Allow server-to-server or tools like Postman (where origin is undefined)
    if (!origin || allowedOrigins.includes(origin)) {
      callback(null, true);
    } else {
      callback(new Error('Blocked by CORS policy: Unauthorized Origin'));
    }
  },
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'OPTIONS'],
  allowedHeaders: ['Content-Type', 'Authorization', 'X-Requested-With', 'X-Api-Key'],
  credentials: true, // Crucial for HttpOnly cookies and authorization headers!
  maxAge: 86400 // Cache preflight OPTIONS response for 24 hours to reduce latency!
}));

// Explicitly handle preflight across all routes
app.options('*', cors());

Fixing CORS in Next.js 15 (Route Handlers & Config)

If you are building an API within Next.js App Router, you can handle CORS globally via next.config.ts headers:

// next.config.ts
import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  async headers() {
    return [
      {
        source: '/api/:path*',
        headers: [
          { key: 'Access-Control-Allow-Credentials', value: 'true' },
          { key: 'Access-Control-Allow-Origin', value: 'https://nitaiitsolution.in' },
          { key: 'Access-Control-Allow-Methods', value: 'GET,POST,PUT,DELETE,OPTIONS' },
          { key: 'Access-Control-Allow-Headers', value: 'X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, Authorization' },
        ],
      },
    ];
  },
};

export default nextConfig;

Bypassing CORS via Nginx Reverse Proxy

The cleanest production architecture avoids cross-origin requests entirely by having an Nginx reverse proxy route both frontend assets and backend API endpoints under the same root domain:

# /etc/nginx/sites-available/default
server {
    server_name nitaiitsolution.in;

    # Frontend web application
    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # Backend API (Same origin! Zero CORS issues!)
    location /api/ {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

Frequently Asked Questions