TypeError: Failed to fetch: What Blocked the Request

Fetch throws TypeError: Failed to fetch when the browser never got a usable HTTP response. It is not a status code. The request was blocked or never completed: a CORS rejection, an http URL on an https page, an ad blocker, a server that is down, or a dropped connection. The console names which.

The same error in each browser
Browser	Message text	Where details appear
Chrome and Edge	TypeError: Failed to fetch	Console line just above, plus the Network tab
Firefox	TypeError: NetworkError when attempting to fetch resource.	Console CORS or mixed content warning
Safari	TypeError: Load failed	Web Inspector console and Network tab

Updated October 28, 2026

Your catch block only sees a vague TypeError, because browsers hide network failure details from scripts for security. The developer tools are not limited that way. Open the console and Network tab while reproducing, and the real reason is almost always printed in plain words.

Fixes in code

Allow one origin from an Express API

Uses the cors package; it also answers the OPTIONS preflight.

import cors from "cors";

app.use(cors({ origin: "https://app.example.com", credentials: true }));

Tell network failures from HTTP errors

The catch only runs for network-level failures and the error thrown below.

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return await res.json();
} catch (err) {
  console.error("Request failed:", err.message);
}

Server side fixes

For an API you control, send the CORS headers from every response, including errors, because a 500 without them surfaces as Failed to fetch and hides the real failure. If you send cookies, use an explicit origin instead of the wildcard and add Access-Control-Allow-Credentials: true.

Confirm the URL with curl from your machine. If curl cannot connect either, the server, port or DNS is wrong and CORS is irrelevant.

Client side fixes

Build API URLs from one config value so production never points at http://localhost. Check navigator.onLine and show a retry button for real offline cases instead of a generic crash.

Sites built with We.Inc are hosted for you, so the cross-origin and mixed-content settings on this page are not something their owners have to configure.

How it works

Open developer tools and reproduce the request.
Read the console message printed with the error, such as a CORS or mixed content warning.
Check the request in the Network tab: blocked, failed, or a CORS preflight that got no allow header.
Fix the server header, the URL or the blocker, then test again.

Tips

Adding mode: 'no-cors' does not fix CORS. It gives you an opaque response you cannot read, so the bug just moves.
If it fails only for some users, test with an ad blocker. Paths containing words like analytics, track or ads are often blocked.
Requests to http:// from a page on https:// are blocked as mixed content in every modern browser, even when the server works.
A fetch cancelled because the page navigated away or a form submitted also shows this error, which looks random in logs.

Frequently asked questions

What does TypeError: Failed to fetch mean?

It means fetch could not complete the request at the network level, so there is no response to read. Causes include CORS blocking, mixed content, DNS or connection failures and browser extensions.

Is Failed to fetch always a CORS error?

No, though CORS is the most common cause on cross-origin calls. A server that is offline, a wrong port, an invalid certificate or a blocker give the same TypeError. The console message tells them apart.

How do I fix Failed to fetch caused by CORS?

Change the server, not the client. It must return Access-Control-Allow-Origin for your page's origin, and answer the OPTIONS preflight with the allowed methods and headers. In development, a dev-server proxy avoids cross-origin calls entirely.

Why does fetch say Load failed on iPhone?

Load failed is Safari's wording for the same network-level failure. Check CORS headers, certificates and whether the request was cut off when the user left the page.

Does fetch throw on a 404 or 500?

No. Fetch resolves normally for HTTP error codes. Check response.ok or response.status yourself; only network failures reject the promise.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.