Debug: CORS errors in browser with correct server config

CORS errors persist in browser even though server CORS headers appear correct.

CORS debugging when server config seems right:

# 1. Check actual response headers
curl -v -X OPTIONS \
  -H 'Origin: http://localhost:3000' \
  -H 'Access-Control-Request-Method: POST' \
  -H 'Access-Control-Request-Headers: content-type,authorization' \
  https://api.example.com/endpoint

# Look for these headers in response:
# Access-Control-Allow-Origin: http://localhost:3000
# Access-Control-Allow-Methods: POST
# Access-Control-Allow-Headers: content-type,authorization

Common causes:

1. PROXY/CDN STRIPS HEADERS
   - Cloudflare, nginx, or load balancer removes CORS headers
   - Fix: Set CORS headers at the edge, not just the app

2. PREFLIGHT RETURNS 404/405
   - Server doesn't handle OPTIONS requests
   - Fix: Add explicit OPTIONS handler

3. CREDENTIALS MODE MISMATCH
   - Using fetch with credentials: 'include'
   - But server returns Access-Control-Allow-Origin: *
   - Fix: Must return specific origin, not wildcard, with credentials
   - Also need: Access-Control-Allow-Credentials: true

4. MISSING HEADERS IN ALLOW-HEADERS
   - Custom headers (Authorization, X-Request-ID) must be listed
   - Content-Type with application/json needs listing

5. REDIRECT ON PREFLIGHT
   - OPTIONS request gets 301/302 redirect -> CORS fails
   - Common: trailing slash redirect (/api vs /api/)

6. HTTP vs HTTPS MISMATCH
   - Origin http://localhost:3000 != https://localhost:3000

7. PORT MISMATCH
   - http://localhost != http://localhost:3000
   - Different ports = different origins

8. CACHING OLD PREFLIGHT
   - Browser caches OPTIONS response
   - Fix: Set Access-Control-Max-Age: 0 during debug

CORS is enforced by the browser. The server must return correct headers on the OPTIONS preflight AND the actual request. Many things between client and server can interfere.

Web applications with cross-origin API requests