No ‘Access-Control-Allow-Origin’ header is present

If your browser says a request was blocked because no Access-Control-Allow-Origin header is present, the server response did not give your page permission to read it cross-origin.

What this error means

CORS is enforced by the browser. When JavaScript on one origin requests a resource from another origin, the response must include an Access-Control-Allow-Origin value that permits the requesting page.

If that header is missing, the browser may still send the request, but it will block your JavaScript from reading the response.

Check these first

  1. Open DevTools → Network and inspect the failing request.
  2. If there is an OPTIONS request, inspect that preflight response too.
  3. Confirm the response includes Access-Control-Allow-Origin.
  4. Make sure its value matches your page origin, or is * for a non-credentialed public response.
  5. Check error responses, redirects, proxies, and CDN responses too — CORS headers must be present on the response the browser actually receives.

Compare against a known-good second origin

Use the CORS Debugger to run the same request shape against AnotherExample’s controlled second origin. If your target fails while the controlled request works, investigate the target server’s CORS configuration first.

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

Common server-side causes

The usual causes are CORS middleware not running for that route, an origin allowlist that does not include the exact requesting origin, a preflight handler that returns without CORS headers, or a proxy/CDN/error handler stripping the headers.

Do not “fix” this by disabling browser security or adding a public CORS proxy in front of a private API. Fix the server response that your browser is actually receiving.

Still stuck?

Paste the browser error into the Error Explainer →

Explore working and broken CORS scenarios in the Playground →