Browser Fetch API Errors — Network Failure, AbortError & TypeError
About Browser Fetch API Errors
Fix Fetch API errors including TypeError (network failure), AbortError (request cancelled), CORS rejection, and handling failed HTTP responses in JavaScript. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: Fetch API throws TypeError for network failures (no connection, DNS failure, CORS block). Important: fetch() does NOT reject on HTTP error status codes (404, 500) — only on network errors. You must check response.ok or response.status manually for HTTP error handling. AbortError is thrown when a request is cancelled via AbortController. Fetch does not support timeout natively — use AbortController with setTimeout. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: TypeError: network failure, DNS resolution failed, or CORS blocked the request. AbortError: request was cancelled by AbortController (timeout or user navigation). Unexpected HTTP errors not caught because fetch() resolved with error status. Mixed content: fetch to HTTP URL from HTTPS page. Request blocked by Content Security Policy connect-src directive. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Always check response.ok: if (!response.ok) throw new Error(`HTTP ${response.status}`). Wrap fetch in try/catch for network errors: try { await fetch(url) } catch (e) { /* network error */ }. Add timeout: const controller = new AbortController(); setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal }). For CORS: ensure the server sends proper Access-Control-Allow-Origin headers. Check DevTools > Network tab for the actual HTTP status and response details. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
Why does fetch not throw on 404 or 500?
By design. fetch() only rejects on network failures. HTTP errors are valid responses. You must check response.ok or response.status explicitly.
Overview
Fix Fetch API errors including TypeError (network failure), AbortError (request cancelled), CORS rejection, and handling failed HTTP responses in JavaScript.
Key Details
- Fetch API throws TypeError for network failures (no connection, DNS failure, CORS block)
- Important: fetch() does NOT reject on HTTP error status codes (404, 500) — only on network errors
- You must check response.ok or response.status manually for HTTP error handling
- AbortError is thrown when a request is cancelled via AbortController
- Fetch does not support timeout natively — use AbortController with setTimeout
Common Causes
- TypeError: network failure, DNS resolution failed, or CORS blocked the request
- AbortError: request was cancelled by AbortController (timeout or user navigation)
- Unexpected HTTP errors not caught because fetch() resolved with error status
- Mixed content: fetch to HTTP URL from HTTPS page
- Request blocked by Content Security Policy connect-src directive
Steps
- 1Always check response.ok: if (!response.ok) throw new Error(`HTTP ${response.status}`)
- 2Wrap fetch in try/catch for network errors: try { await fetch(url) } catch (e) { /* network error */ }
- 3Add timeout: const controller = new AbortController(); setTimeout(() => controller.abort(), 5000); fetch(url, { signal: controller.signal })
- 4For CORS: ensure the server sends proper Access-Control-Allow-Origin headers
- 5Check DevTools > Network tab for the actual HTTP status and response details