Skip to main content
DevToolbox

CORS Error Troubleshooter

Nothing leaves your browser

Paste the error from the browser console and describe the request. Get the likely causes in order, the response headers the server must send, and examples for common servers.

Paste the error from the browser console and/or describe the request. The tool explains the error and shows what the server must send. It makes no network request: it only reads what you type.

What you see

Where your frontend runs, as in the address bar: scheme, host and port.

The address the page calls.

Comma separated, for example Authorization, X-Api-Key.

Other than the basic ones, for example X-Total-Count.

Paste an error message or fill in the request to see what is wrong and how to fix it.

Common mistakes

  • Using mode: 'no-cors'

    It only hides the error: the response is opaque and unreadable. Fix the server instead.

  • Access-Control-Allow-Origin: * together with credentials

    Browsers reject it. Name the exact origin and send Access-Control-Allow-Credentials: true, or drop the credentials.

  • Setting Access-Control-* headers on the request

    These are response headers. Adding them to the request does nothing useful and can even force a preflight.

  • CORS headers only on success responses

    Errors (401, 404, 500) need them too, or the browser shows a CORS error instead of the real one.

  • Authentication before CORS

    A preflight carries no cookies or Authorization header. If your auth middleware runs first, it rejects the preflight.

  • Reflecting any Origin back

    Echoing the request's Origin without checking it against an allowlist (and allowing credentials) lets every website read your users' data. Compare with a fixed list.

  • Forgetting Vary: Origin

    When the allowed origin changes per request, caches and CDNs need Vary: Origin, or they serve one site's answer to another.

  • Thinking curl or Postman will show the problem

    CORS is enforced only by browsers. Requests from curl, servers and Postman always work.

  • Asking a proxy to "fix" it blindly

    A dev proxy (Vite, webpack or Next.js rewrites) or your own backend route avoids CORS in development because the browser then sees one origin. Do not use a public CORS proxy for requests with secrets: it can read everything you send.

Security: CORS is a browser rule that protects your users, not a firewall for your API. Allow only the origins you trust, never echo an arbitrary Origin back, and be careful with Access-Control-Allow-Credentials. The explanations follow the MDN guide to CORS and the Fetch standard.