Debugging CORS Errors: A Developer's Guide

What Is CORS?

CORS (Cross-Origin Resource Sharing) is a browser security feature. When JavaScript on app.example.com tries to fetch from api.example.com, the browser blocks the request unless the API server explicitly allows it via CORS headers.

Common Error Messages

Access to fetch at 'https://api.example.com' from origin 'https://app.example.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.

How CORS Works

Simple Requests

GET/POST with standard headers go directly. The browser checks the response for Access-Control-Allow-Origin.

Preflight Requests

For PUT/DELETE or custom headers, the browser sends an OPTIONS request first. The server must respond with appropriate CORS headers.

Fix: Server-Side Headers

Add these response headers to your API:

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400

Common Mistakes

• Wildcard with credentials: Access-Control-Allow-Origin: * doesn't work with credentials: include. Use the specific origin instead.
• Missing preflight response: The OPTIONS request returns 404 or 405.
• CDN stripping headers: Your CDN removes CORS headers. Whitelist them.
• Redirect on preflight: 301/302 on OPTIONS requests break CORS.