CORS error

Updated 11 October 2026

Short answer

Browsers stop a page on one site from reading responses from another site unless that other site says it's allowed. That permission is sent by the server as CORS headers, mainly Access-Control-Allow-Origin. A CORS error means the server didn't send the right headers for your site's address. So the fix belongs on the API's server: allow your exact origin (scheme, domain and port), and answer the browser's preflight OPTIONS request. Nothing in the front-end code can override it.

What's the problem

The browser console shows "Access to fetch at ... has been blocked by CORS policy" or "Cross-Origin Request Blocked", and your app can't load data from its API. It often works in local development but not in production, or vice versa.

Why it happens

  • The API doesn't allow your origin, for example it allows http://localhost:3000 but not https://www.yoursite.com.
  • www versus no www, or http versus https: each is a different origin.
  • The preflight OPTIONS request fails (404, 401, or no CORS headers on it).
  • Credentials: cookies are sent, but the server uses * as the allowed origin, which browsers reject with credentials.
  • The API errored and its error response had no CORS headers, so a 500 looks like a CORS error.

How to fix it

  1. Read the console message. It says which header is missing or wrong.
  2. Check the Network tab for the preflight OPTIONS request and the real request, and their response headers.
  3. On the API server, set Access-Control-Allow-Origin to your exact site origin (and include it on error responses too).
  4. Allow the methods and headers you use (Access-Control-Allow-Methods, Access-Control-Allow-Headers), and make OPTIONS return success.
  5. If you send cookies, set Access-Control-Allow-Credentials: true and a specific origin, not *.
  6. Or avoid cross-origin calls by serving the API from the same domain as the site.

What Preventionlabs checks

One click runs the full report on your domain. For this problem it shows whether your site loads, how fast, and where its redirects go; every outside service your homepage loads scripts and files from. With Cloudflare connected, it also shows recent deploys and account changes, with their times. It doesn't call your API with your app's own requests or read your logs, so test the failing request directly as well.

Run your free report

Your first report is free, no card needed. Then A$50 a month, up to 10 domains. Read-only: it never changes anything.

Sources

  1. MDN Web Docs: Cross-Origin Resource Sharing (CORS)referenceCross-Origin Resource Sharing ( CORS ) is an HTTP -header based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.
  2. MDN Web Docs: CORS errorsreferenceThe only way to determine what specifically went wrong is to look at the browser's console for details.
  3. MDN Web Docs: Cross-Origin Resource Sharing (CORS)referenceUnlike simple requests , for "preflighted" requests the browser first sends an HTTP request using the OPTIONS method to the resource on the other origin, in order to determine if the actual request is safe to send.
  4. MDN Web Docs: Cross-Origin Resource Sharing (CORS)referenceThe server must not specify the * wildcard for the Access-Control-Allow-Origin response-header value, but must instead specify an explicit origin;

Related

"Failed to fetch" / fetch failed "Failed to fetch" means no usable response arrived: a network error, a blocked request (often CORS or mixed content), or a bad URL. The console says which. API not working Look at the status code and response body the API returns: 4xx means the request is wrong (login, data, limits); 5xx means the API's server failed. Mixed content error Your secure (HTTPS) page loads some files over insecure HTTP. Browsers block them or drop the padlock. Change those links to HTTPS. JavaScript error Open the browser console (F12). The red error names the problem, the file and the line. That's the starting point for every JavaScript error.
← All of API