Preflight gotchas

A preflight is an OPTIONS request the browser sends before the real request to ask the server, can I do this? If the preflight fails, the real request never happens and the user sees a silent error. Most CORS bugs are preflight bugs.

Preflight flow

Two requests where you expected one.

The browser fires a preflight whenever the request is not a "simple" request. Custom headers like Idempotency-Key or Authorization trigger one. Content-Type application/json triggers one. PUT, PATCH, and DELETE trigger one. Plain GET with default headers does not.

terminal
bash
# Simulate the preflight the browser will send
curl -i -X OPTIONS http://localhost:8000/deploy-patterns/jobs \
  -H "Origin: http://localhost:3000" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type, Idempotency-Key"

# Good response includes:
#   Access-Control-Allow-Origin: http://localhost:3000
#   Access-Control-Allow-Methods: POST
#   Access-Control-Allow-Headers: Content-Type, Idempotency-Key

When a request mysteriously fails in the browser, send the preflight yourself with curl. If Allow-Headers is missing Idempotency-Key, the server is rejecting the preflight silently and the browser never sends the real POST.

AI prompt: Ask an AI to diagnose a CORS preflight failure

Loading practice…

Quiz: Quiz

Loading practice…