CORS Error — Access-Control-Allow-Origin Missing or Mismatched

What causes this error

CORS (Cross-Origin Resource Sharing) is enforced by browsers — not servers, not curl, not Postman. When your frontend at `https://app.example.com` calls an API at `https://api.example.com`, the browser checks that the API's response includes `Access-Control-Allow-Origin: https://app.example.com`. If the header is missing, wrong, or `*` when credentials are needed, the browser blocks the response and logs a CORS error.

How to fix it

1. 01

   step 1

   Add CORS headers on the server — not the client

   CORS is a server-side concern. Adding headers in your browser-side JavaScript does nothing. The server must include the correct `Access-Control-Allow-Origin` header. For Express, use the `cors` package. For Next.js App Router, use `next.config.js` headers or route handler headers.

   // Express — cors package (recommended)
   const cors = require('cors')
   app.use(cors({
     origin: ['https://app.example.com', 'https://staging.example.com'],
     methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
     allowedHeaders: ['Content-Type', 'Authorization'],
     credentials: true,  // only if using cookies/auth headers
   }))
   
   // Handle OPTIONS preflight explicitly
   app.options('*', cors())

   Copy
2. 02

   step 2

   Handle preflight OPTIONS requests correctly

   The browser sends an OPTIONS preflight request before any non-simple cross-origin request. The server MUST respond to OPTIONS with a 200 (or 204) and the CORS headers — without requiring authentication. If auth middleware runs before CORS middleware, it blocks the preflight with 401, causing a CORS error.

   // Middleware order matters — CORS before auth
   app.use(cors({ origin: 'https://app.example.com' }))  // 1st
   app.use(authMiddleware)                                 // 2nd
   app.use(express.json())                                 // 3rd
   
   // BAD order (auth blocks OPTIONS preflight):
   app.use(authMiddleware)                                 // blocks preflight!
   app.use(cors({ origin: 'https://app.example.com' }))

   Copy
3. 03

   step 3

   Never use Access-Control-Allow-Origin: * with credentials

   If your request includes cookies or an Authorization header (`credentials: 'include'` in fetch, or `withCredentials: true` in axios), the server MUST respond with the specific origin — not `*`. Using `*` with credentials causes the browser to block the response.

   // Browser — request with credentials
   fetch('https://api.example.com/me', {
     credentials: 'include',  // sends cookies
   })
   
   // Server MUST respond with the specific origin, not *
   // ✅ Access-Control-Allow-Origin: https://app.example.com
   // ✅ Access-Control-Allow-Credentials: true
   // ❌ Access-Control-Allow-Origin: *  (blocked by browser with credentials)

   Copy
4. 04

   step 4

   Fix CORS in Next.js App Router

   Next.js API routes don't add CORS headers by default. Add them in the route handler or via `next.config.js` headers for the API path.

   // app/api/data/route.ts
   export async function GET(req: Request) {
     return new Response(JSON.stringify({ data: 'ok' }), {
       headers: {
         'Content-Type': 'application/json',
         'Access-Control-Allow-Origin': 'https://app.example.com',
         'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
         'Access-Control-Allow-Headers': 'Content-Type, Authorization',
       },
     })
   }
   
   // Handle preflight
   export async function OPTIONS() {
     return new Response(null, { status: 204, headers: {
       'Access-Control-Allow-Origin': 'https://app.example.com',
       'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
       'Access-Control-Allow-Headers': 'Content-Type, Authorization',
     }})
   }

   Copy
5. 05

   step 5

   Add CORS headers at the Nginx/proxy level

   If you can't change the application code (e.g., proxying a third-party service), add CORS headers at the Nginx level. This works for simple cases but doesn't support dynamic origin reflection.

   # Nginx — add CORS headers for all responses
   location /api/ {
       proxy_pass http://backend;
       add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
       add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
       add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;
   
       if ($request_method = OPTIONS) {
           add_header 'Access-Control-Max-Age' 86400;
           return 204;
       }
   }

   Copy

How to verify the fix

• curl with `-H 'Origin: https://yourapp.com'` shows `Access-Control-Allow-Origin` matching your origin.
• Browser Network tab shows the actual API response (not blocked).
• Requests with credentials (`credentials: 'include'`) receive `Access-Control-Allow-Credentials: true`.