TypeError: Failed to fetch (only in production)

What it means in plain English

fetch() failed before it got a usable HTTP response. MDN says the promise rejects for a bad URL or a network failure. A normal 404 or 500 does not cause this message. Those still resolve, and you check response.ok. Production-only usually means the live page is calling a different URL than your laptop did.

Likely causes

• The request URL is still http://localhost:…, or it is empty because an env var was missing at build time.
• The page is HTTPS and the API is HTTP. MDN calls that mixed content. Browsers block those fetch() calls.
• The browser blocked a cross-origin call. CORS errors are hidden from JavaScript on purpose. The console has the real reason. A network-level failure is often reported as "CORS request did not succeed" even when CORS headers are not the bug.
• An ad blocker or privacy extension blocked the request. MDN lists that under the same network failure.
• The host name in the request does not resolve, or the TLS certificate is invalid.

How to fix it, step by step

1. On the live site, open DevTools → Network, reproduce the click, and select the failed row. Note the full URL, the scheme (http or https), and whether the status is (failed) rather than a number.
2. If the URL is localhost or blank, set the real API origin in the host's env vars, with the VITE_ or NEXT_PUBLIC_ prefix if browser code reads it, and redeploy.
3. If the page is HTTPS and the URL is HTTP, serve the API over HTTPS.
4. If the console says the CORS header is missing or doesn't match your live origin, fix the API's Access-Control-Allow-Origin. Add your production origin. * is not accepted when the request sends credentials.
5. Try a private window with extensions off. If it works there, an extension was blocking the call.
6. A numeric status such as 401 or 500 is a different bug. Read that status. It is not Failed to fetch.

How to check it worked

• The Network row for that call shows a status code, and the page shows your data or the API's real error.
• Reload once more after a hard refresh so you are not looking at an old bundle.

Sources

• https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch (opens in a new tab)
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSDidNotSucceed (opens in a new tab)
• https://developer.mozilla.org/en-US/docs/Web/Security/Defenses/Mixed_content (opens in a new tab)
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS (opens in a new tab)