TypeError: Failed to fetch (tested)

TypeError: Failed to fetch is what Chrome's fetch() throws when no usable response came back. We reproduced 15 different causes in Chromium 153. Every one of them produced exactly the same message. The real reason is only in the DevTools console and Network tab, never in the error object.

1. The short answer

The message tells you almost nothing. In our tests CORS errors, a server that was down, a DNS failure, a bad certificate, mixed content, an ad-blocker block, a CSP block, an offline browser and a dropped connection all threw the same thing:

TypeError: Failed to fetch

The error had no cause (it was undefined). Your JavaScript cannot see which case it was. That is on purpose: if a page could tell "CORS blocked" from "host does not exist", it could scan networks it should not see.

To find the cause, open DevTools. The Console shows a line like Failed to load resource: net::ERR_CONNECTION_REFUSED or a CORS message. The Network tab shows the same code in the Status column.

2. Our test setup

A page on http://app.test:8983 called fetch() on http://api.test:8983 (a different origin), or on HTTPS port 8984 with a self-signed certificate. Both names pointed to 127.0.0.1 through Chromium's --host-resolver-rules. For each case we logged the thrown error, the console lines and Playwright's requestfailed reason. The server logged which requests actually arrived.

try {
  await fetch('http://api.test:8983/nocors');
} catch (e) {
  console.log(e.name, e.message, e.cause); // TypeError Failed to fetch undefined
}

3. Results: cause, message, console line

Two things to note. First, with a missing CORS header the request did reach the server and the server answered 200. The browser just would not hand the answer to your code. So "it works in curl / Postman" is normal for a CORS bug. Second, a server-side 500 without CORS headers looks exactly like a CORS problem. Add CORS headers to error responses too, or you will chase the wrong bug.

4. Errors that look similar but have other wording

These did not say "Failed to fetch" in Chromium 153:

One more trap: when the body was cut short (Content-Length 100, only 3 bytes sent), fetch() itself resolved with status 200. The error came later, from await response.text(), as TypeError: Failed to fetch with net::ERR_CONTENT_LENGTH_MISMATCH in the console. If the stack trace points at .json() or .text(), suspect a dropped connection mid-body.

5. The same causes in Node.js fetch

Node 24's built-in fetch uses a different message, TypeError: fetch failed, but it does give you the real reason in error.cause. There is no CORS in Node: the no-CORS-header request simply returned 200.

try { await fetch(url); }
catch (e) { console.log(e.message, e.cause?.code, e.cause?.message); }

So in Node, always log e.cause. Logging only e.message throws the useful part away.

6. How to tell them apart and fix each one

7. A quick debugging order

1. Open DevTools > Console and read the line just before or after the error. It names the real cause.
2. Open the Network tab, click the failed request, and look at the Status column (e.g. (failed) net::ERR_... or CORS error).
3. Run the same request with curl -i. If curl gets a normal answer, it is a browser-side rule: CORS, mixed content, CSP or an extension.
4. If curl fails too, it is the network or server: DNS, refused, cert or reset.
5. Check the API's response headers with our HTTP header checker to see if CORS headers are there.

Written with AI assistance. Measured on 2026-10-02 with headless Chromium 153.0.8010.12 (Playwright) and Node.js 24.21.0 against local Node HTTP and HTTPS (self-signed) test servers. Hostnames were mapped with --host-resolver-rules so the page and API were different origins. Ad blockers were simulated with Playwright route.abort(). PlainHeaders is our extension; Chromium, Playwright and Node.js are free.