"TypeError: Failed to Fetch": What It Means and How to Fix It

TypeError: Failed to fetch

(or NetworkError when attempting to fetch resource in Firefox, Load failed in Safari)

This error comes from JavaScript's fetch() and means something very specific: the request never produced a response your code could see. It's not a 404 or a 500 — those are responses. This is "I couldn't get an answer at all."

The error message itself is deliberately vague (for security reasons, browsers hide the details from JavaScript). The details are in the browser's developer tools.

Look in the right place

Open dev tools (F12), then:

Console tab — there's usually a second, more specific message right next to "Failed to fetch."
Network tab — find the failed request (red). Its status column says (failed), CORS error, (blocked:mixed-content) or similar.

(Browser developer tools for beginners)

Cause 1: CORS

The console says something like "blocked by CORS policy: No 'Access-Control-Allow-Origin' header."

Your frontend at one address (say https://myapp.com) called an API at a different address (https://api.myapp.com), and the API didn't say it allows that. The server must send CORS headers. Fixing this happens on the server, not in the frontend. (CORS errors explained)

Cause 2: Wrong URL

Still pointing at http://localhost:3000 in production. The visitor's browser tries to connect to their own computer. (What is localhost?)
A typo in the domain, or an environment variable that's undefined so the URL becomes undefined/api/users. (Environment variables undefined)

Check the request URL in the Network tab — it's often obviously wrong.

Cause 3: Mixed content

Your page is on https:// and you're fetching http://. Browsers block it. The console says "Mixed Content." Use https:// for the API, or a relative URL like /api/users. (Mixed content errors)

Cause 4: The server is down or unreachable

The API isn't running, the domain doesn't resolve, the port is wrong, or the server's SSL certificate is invalid. Open the API URL directly in a browser tab: if it doesn't load there, it won't load in fetch either. (Your connection is not private)

Cause 5: An ad blocker or privacy extension

Extensions block URLs containing words like analytics, track, ads or known third-party domains. The Network tab shows ERR_BLOCKED_BY_CLIENT. Try in a private window with extensions off. If that's it, rename the endpoint, or accept that some visitors will block it.

Cause 6: The request was cancelled

The page navigated away mid-request, a form submitted and reloaded the page, or a component unmounted. In React, a <form> without event.preventDefault() reloads the page and kills the fetch:

function onSubmit(event) {
  event.preventDefault()
  fetch('/api/contact', { method: 'POST', body: new FormData(event.target) })
}

Handle it gracefully

Network failures will always happen — phones go into tunnels. Catch them:

try {
  const res = await fetch('/api/items')
  if (!res.ok) throw new Error(`Server returned ${res.status}`)
  const items = await res.json()
} catch (err) {
  showMessage("Couldn't reach the server. Check your connection and try again.")
}

Note the res.ok check: fetch does not throw on 404 or 500. It only throws when there's no response at all — which is exactly this error.

The summary

"Failed to fetch" means no response at all, not an error response.
The console and Network tab tell you the real reason.
Usual causes: CORS, wrong or localhost URL, http on an https page, server down, ad blocker.
Catch network errors and check res.ok for HTTP errors.

EasySpawn serves your frontend and API from the same server on your own domain with HTTPS, which removes most CORS and mixed-content problems before they start. See how it works or join the waitlist.