TypeError: Failed to fetch / NetworkError when attempting to fetch resource
fetch() gives up before it ever gets a response, and the browser deliberately hides the reason from your JavaScript. The real cause is almost always printed one line above in the console, or visible in the Network tab.
Same error, three browsers
| Browser | Message |
|---|---|
| Chrome / Edge | TypeError: Failed to fetch |
| Firefox | TypeError: NetworkError when attempting to fetch resource. |
| Safari | TypeError: Load failed |
For security, browsers give scripts the same vague error whatever went wrong, so a page cannot probe your network. DevTools, which only you can see, shows the details.
Important: HTTP errors do not throw
const res = await fetch('/api/thing'); // a 404 or 500 does NOT throw
if (!res.ok) throw new Error('HTTP ' + res.status);
const data = await res.json();If you are seeing Failed to fetch, the problem is earlier than a status code.
Find the cause in two minutes
- Console: look for a red line near the error. It usually says one of the causes below in plain words.
- Network tab: find the request. The Status column shows
(blocked:mixed-content),(blocked:csp),(blocked:other),CORS error,(failed) net::ERR_...or(canceled). - Open the URL directly in a new tab, or with
curl -i URL. If that fails too, it is the server, DNS or network. If it works, it is a browser policy.
The usual causes
| What you see | Cause | Guide |
|---|---|---|
| “blocked by CORS policy” | Server did not send Access-Control-Allow-Origin for your origin, or the preflight failed | CORS errors, preflight, credentials |
| “Mixed Content” | HTTPS page calling an http:// API | Mixed content |
| “violates ... connect-src” | Your own Content Security Policy blocks that host | connect-src |
ERR_BLOCKED_BY_CLIENT | Ad blocker or privacy extension (URLs with “analytics”, “track”, “ads”) | ERR_BLOCKED_BY_CLIENT |
ERR_NAME_NOT_RESOLVED | Typo in the host, or DNS not set up | DNS errors |
ERR_CONNECTION_REFUSED | Nothing listening on that host/port; dev server not running, wrong port, or localhost vs 127.0.0.1 / IPv6 | localhost refused, ECONNREFUSED ::1 |
ERR_CERT_... | Self-signed, expired or wrong-name certificate on the API | expired cert, wrong name |
(canceled) | Page navigated away or a form submit reloaded the page mid-request; an AbortController fired | Call event.preventDefault() in the submit handler |
Quick fixes that are often it
- Use a relative URL (
fetch('/api/x')) and let a same-origin proxy forward to the backend in development; that removes CORS and mixed content in one go. - Check the URL for spaces or unescaped characters; build query strings with
URLSearchParamsor check them in the URL encoder. - Try a private window with extensions disabled to rule out ad blockers.
- Mobile apps and React Native: an
http://URL is blocked by default (App Transport Security on iOS, cleartext rules on Android), andlocalhoston a phone means the phone itself.
Related
TypeError: fetch failed (Node / undici) · net::ERR_CONNECTION_TIMED_OUT · HTTP 504 Gateway Timeout · CORS errors explained · Mixed content blocked · ERR_BLOCKED_BY_CLIENT · Refused to connect (connect-src) · React hydration failed · ETIMEDOUT / connect ETIMEDOUT · ECONNRESET · getaddrinfo ENOTFOUND · WebRTC ICE failed · WebSocket connection failed · HTTP 206 Partial Content
Questions
What does TypeError: Failed to fetch mean?
The browser could not get any HTTP response for the request: it was blocked by CORS, mixed content, CSP or an extension, or the connection failed because of DNS, a wrong port, a certificate or being offline.
Does a 404 or 500 cause Failed to fetch?
No. fetch resolves normally for HTTP error statuses; check response.ok yourself. Failed to fetch means no usable response arrived at all.
Why is the error message so vague?
Browsers hide network details from scripts for security. The real reason is shown in the DevTools console and Network tab.
Is NetworkError when attempting to fetch resource the same error?
Yes. That is Firefox's wording; Safari says Load failed. The causes and fixes are the same.
How do I fix Failed to fetch caused by CORS?
The server must send Access-Control-Allow-Origin for your page's origin and answer the OPTIONS preflight. In development, a same-origin proxy avoids CORS entirely.
Published .