Blocked by CORS policy: what it means and what to check

“Blocked by CORS policy” is a broad browser message, not one single configuration error. The useful clue is the rest of the Console message and the request details in DevTools.

What the browser is telling you

Your page tried to access a resource on another origin, and the browser did not find a CORS response that permits JavaScript to use it. The request may have failed during preflight, or the final response may be missing or returning the wrong CORS headers.

The exact Console wording matters. Treat “blocked by CORS policy” as the category, then identify the specific reason underneath it.

Check these first

  1. Copy the complete browser Console error, not just the words “blocked by CORS policy.”
  2. Open DevTools → Network and inspect the failing request.
  3. Look for an OPTIONS request immediately before it. If one exists, inspect that preflight separately.
  4. Check the response for Access-Control-Allow-Origin and confirm it permits the requesting page origin.
  5. For a preflight, also inspect Access-Control-Allow-Methods and Access-Control-Allow-Headers.
  6. If credentials are used, check that the server's credentialed CORS response is valid for the exact origin.
  7. Check redirects, authentication failures, proxy/CDN responses, and server errors too; the browser evaluates the response it actually receives.

Compare with a known-good second origin

Run this from the Console of the page that is failing:

fetch('https://cors.anotherexample.com/api/cors/open')
  .then(r => r.json())
  .then(console.log)
  .catch(console.error);

If the controlled AnotherExample request works while your target request fails, you have narrowed the problem toward the target server, proxy, redirect, or its CORS configuration rather than cross-origin fetch in general.

Match the detailed error to the next check

If the browser says no Access-Control-Allow-Origin header is present, start with the missing-header guide. If it says the preflight or OPTIONS request failed, inspect the preflight response first. If everything works on localhost but not after deployment, compare the exact production origin and infrastructure.

Other detailed errors can point to credential rules, disallowed methods or headers, redirects, or a response that never reached the browser successfully.

Related CORS guides

No Access-Control-Allow-Origin header →

CORS preflight / OPTIONS request failed →

CORS works locally but fails in production →

Still stuck?

Paste the full Console message into the Error Explainer →

Compare your request in the CORS Debugger →

Explore working and broken CORS scenarios in the Playground →