CORS: Simple vs Non-Simple Requests

CORS: Simple vs Non-Simple Requests

Simple Requests (No Preflight)

• Methods: GET, POST, HEAD.
• Content-Type: application/x-www-form-urlencoded, multipart/form-data, text/plain.
• Headers: only CORS-safe headers (Accept, Accept-Language, Content-Language, Content-Type).
• No custom headers (no Authorization, no X-Custom-Header).

The browser sends the request directly and checks the response headers.

Non-Simple Requests (Preflight Required)

• Methods: PUT, DELETE, PATCH, CONNECT, TRACE.
• Content-Type: application/json, text/xml, etc.
• Custom headers: Authorization, X-Requested-With, X-Custom-Header.
• ReadableStream in the request body.

The browser sends an OPTIONS preflight first.

Example: Simple

fetch("https://api.example.com/data"); // GET, no custom headers -> simple

Example: Non-Simple

fetch("https://api.example.com/users", {
  method: "PUT",
  headers: { "Content-Type": "application/json", "Authorization": "Bearer token" },
  body: JSON.stringify({ name: "Kunal" }),
}); // PUT + JSON + Authorization -> preflight

The Takeaway

Simple: GET/POST/HEAD with safe content types and no custom headers (no preflight). Non-simple: PUT/DELETE/PATCH, JSON content type, or custom headers (preflight required). Most modern API calls (JSON + Authorization) are non-simple and trigger a preflight.