CORS & Preflight Simulator

Without the same-origin policy, any website you open could use your logged-in session to read your email or bank balance by quietly calling those sites from JavaScript. So browsers refuse to let a page read responses from a different origin unless that origin agrees.

CORS is a controlled relaxation of the same-origin policy. The browser attaches an Origin header to cross-origin requests; the server answers with Access-Control-Allow-Origin (and friends) to say who may read the result.

It also doesn't apply to everything: <img>, <script src> and form posts have always been allowed cross-origin. CORS governs fetch(), XMLHttpRequest, web fonts and a few other APIs that expose the response to JavaScript.

A request is “simple” — sent immediately with no permission check — only if all of these are true:

• The method is GET, HEAD or POST.
• The only headers are CORS-safelisted ones (Accept, Accept-Language, Content-Language, Content-Type, …).
• If Content-Type is set, it is text/plain, application/x-www-form-urlencoded or multipart/form-data.

Anything else — PUT, DELETE, PATCH, Content-Type: application/json, an Authorization header or a custom header — needs a preflight: an automatic OPTIONS request asking the server for permission before the real request is sent.

OPTIONS /v1/orders HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization

HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: content-type, authorization
Access-Control-Max-Age: 86400

Access-Control-Max-Age tells the browser how long it may cache this answer, so repeat calls skip the extra round trip (browsers cap it: roughly 2 hours in Chrome, 24 hours in Firefox).

By default cross-origin fetch() sends no cookies. Opting in with credentials: 'include' triggers stricter rules, and each one is a common source of errors:

• Access-Control-Allow-Origin *cannot be `**. It must echo the exact origin
• The response must include Access-Control-Allow-Credentials: true (on the preflight response too).
• * in Allow-Headers or Allow-Methods is treated as a literal string, not a wildcard.
• The wildcard in Allow-Headers never covers Authorization — list it explicitly.

Most frameworks ship CORS middleware. Register it before authentication so preflights aren't rejected:

// Express
import cors from 'cors';

app.use(cors({
  origin: ['https://app.example.com'],   // allow-list, echoed back
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['content-type', 'authorization'],
  credentials: true,
  maxAge: 86400,
}));

# Nginx
location /api/ {
  if ($request_method = OPTIONS) {
    add_header Access-Control-Allow-Origin  "https://app.example.com";
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
    add_header Access-Control-Allow-Headers "content-type, authorization";
    add_header Access-Control-Max-Age 86400;
    return 204;
  }
}