How to Debug a CORS Error in DevTools
By Ankit Jain · Updated
Use a repeatable browser-first workflow to identify the failing response, responsible layer, smallest safe fix and verification.
Start with the request the browser actually made. The console is a clue; Network identifies the failing response and the layer that produced it.
1. Record the request conditions
Write down the page’s origin, full API URL, method, outgoing headers, and credentials mode. Preserve the Network log. Avoid copying production tokens into public tools.
2. Find OPTIONS if required
JSON, Authorization, and methods such as PUT commonly require preflight. If OPTIONS exists, inspect its status, redirects, and permission headers. If it fails, the actual request normally will not appear. A cached permission can explain why OPTIONS is absent.
3. Inspect the actual response independently
Check Access-Control-Allow-Origin and, for include mode, credential permission. Inspect 401, 404, and 500 responses too. A success route can have the correct headers while an auth filter or proxy error page does not.
4. Identify who owns that response
Follow the layers: application, auth middleware, reverse proxy, CDN. Fix the layer that returns or modifies the failed response. Use one CORS policy owner to avoid duplicate headers and cache conflicts. Compare browser-facing headers with direct application captures.
5. Separate network and application failures
DNS, TLS, mixed-content, CSP, blocked ports, or browser network restrictions can prevent an HTTP response. A generic fetch TypeError does not identify CORS by itself. An HTTP 401 with valid CORS permission is an authentication failure that JavaScript can read.
6. Apply and verify the smallest safe change
Allow the intended origin, method, and headers. Retry from the real frontend, in a fresh context if cached preflight could matter. Check success and error paths and an unapproved origin. Do not disable browser security or deploy an open proxy to conceal the underlying problem.
Inspect headers with curl
For a read-only endpoint you control:
curl -i 'https://api.example.com/profile' -H 'Origin: https://app.example.com'
curl -i -X OPTIONS 'https://api.example.com/profile' -H 'Origin: https://app.example.com' -H 'Access-Control-Request-Method: GET' -H 'Access-Control-Request-Headers: authorization'curl displays headers but does not enforce browser CORS or browser cookie rules. Do not treat its success as proof of a working browser integration. Use local header analysis to interpret a capture, then verify in your frontend.
Reproduce a response you control
If the real API is unavailable, Beeceptor can provide a mock response with a chosen status and headers so you can isolate frontend handling. Compare the captured request with the real integration before drawing a conclusion about the production API. Read the Beeceptor mock-rule guide.