My app can't talk to its own backend (CORS error). How do I fix it?

Also searched as: CORS error in production · How to fix CORS error · What causes a CORS error · CORS error in React · CORS error fix

Updated 3 October 2026

Short answer

Browsers only let a page read replies from a different address (a different domain, port, or http versus https) if that server says the page is allowed. In production your frontend and backend usually live at different addresses, and your backend isn't saying your frontend's address is allowed. The fix goes on the backend: allow your live frontend's exact address. Nothing you change in the frontend will fix it.

What's the problem

Pages load, but nothing that needs data works: logins fail, lists are empty, buttons do nothing. The browser's console shows a red message mentioning "CORS", "Access-Control-Allow-Origin" or "blocked by CORS policy". On the developer's machine, it all worked.

Why it happens

  • The browser is protecting your users. By default, a page can't read responses from another site. CORS is how a server opts in and names who may read its responses.
  • Development hid it. Locally, the frontend and backend often share localhost, or the development server quietly passes requests through. In production they're app.yoursite.com and api.yoursite.com, or two different hosting platforms.
  • The allowed address doesn't match exactly. https://yoursite.com and https://www.yoursite.com are different addresses. So are http and https.
  • Logins make it stricter. If requests carry cookies or login credentials, the server can't use the "allow everyone" wildcard. It must name the exact address.
  • The check before the request fails. For many requests the browser first sends a "preflight" check. If the backend doesn't answer that check correctly, the real request is never sent.
  • Sometimes it's a crash in disguise. If the backend errors before it adds its CORS headers, the browser reports a CORS error, even though the real problem is the crash. Check the status code in the Network tab.

How to fix it

  1. Read the exact console message. It says which address was blocked and which header was missing or wrong.
  2. Check the request's status in the Network tab. A 500 or 502 means fix the backend error first.
  3. On the backend, allow your production frontend's exact origin, for example https://www.yoursite.com, with no trailing slash. Most frameworks have a CORS setting or package for this. Put the address in a setting, not in the code.
  4. If logins or cookies are involved, allow credentials and name the origin explicitly. No wildcard.
  5. Make sure preflight OPTIONS requests get a successful reply with the same headers.
  6. Don't "fix" it in the browser. Extensions that switch CORS off only work on your own computer, and public CORS proxies send your users' data through someone else's server.

When to call Preventionlabs

If one allowed address fixes it, you're done. Call us when the frontend and backend were built by different people, or deployed to places nobody can find, and getting them talking is one problem in a long list. A resurrection delivers the app running in your own hosting account with the user flows you list working end to end, including the frontend reaching its backend.

Submit your project for a free assessment

Free assessment. $10,000 AUD flat to get it live, only if we take it on and you go ahead.

Sources

  1. MDN Web Docs: Cross-Origin Resource Sharing (CORS)web 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 errorsweb referenceMost CORS errors can only be resolved on the server, because the server controls whether cross-origin access is allowed.
  3. MDN Web Docs: Cross-Origin Resource Sharing (CORS)web referenceCORS also relies on a mechanism by which browsers make a "preflight" request to the server hosting the cross-origin resource, in order to check that the server will permit the actual request.
  4. MDN Web Docs: Access-Control-Allow-Originweb referenceAttempting to use the wildcard with credentials results in an error.

Related

My app works on my computer but not online. Why? The server isn't your computer. One of five things differs: settings, addresses, the database, the port, or file names. Here's how to find which. 500 Internal Server Error after deploying. What does it mean? Your server code hit an error it didn't handle. The page won't say what; the server logs will. After a deploy it's usually a missing setting, database or file. Is it safe to keep login tokens (JWTs) in localStorage? It's a risk: any script on your page can read localStorage, so one injected script can steal every logged-in session. HttpOnly cookies can't be read by scripts. My site is a blank white page after deploying. Why? The page loaded but the app inside it didn't start. Usually its files are fetched from the wrong path, a setting was blank at build, or routing isn't set up.
← All of Live but broken