Failed to fetch
The browser failed to execute a fetch network request.
Usually happens because:
- ☑ Server is offline
- ☑ CORS header is missing
- ☑ No internet connectivity
🔍 Quick Checklist:
📊 Where this usually happens (estimated occurrence)
What is Failed to fetch?
This TypeError is thrown by the browser's Fetch API when a network request fails to start or complete due to network outages, domain resolution failures, SSL configuration mismatches, or CORS blocks.
Common Causes
- The client has lost internet connectivity.
- The target server is offline or returned an invalid SSL/TLS certificate.
- CORS policy blocks access to the external domain.
- The destination URL has spelling typos.
Common Mistakes
- Assuming fetch rejects promises on HTTP 404 or 500 status codes (fetch only rejects on physical network failures; status codes must be checked via response.ok).
How to Fix
Framework-Specific Examples
Standard catch block monitoring network outages.
async function loadData() {
try {
const res = await fetch('https://api.com/users');
const users = await res.json();
} catch (err) {
console.log('Network lookup failed.');
}
}Server Configuration Examples
Node.js standard fetch behavior.
# Handled at client engineBest Practices
- Check `navigator.onLine` before executing heavy fetches.
- Implement client-side fallback offline modes.
Frequently Asked Questions (FAQ)
Q: Why does fetch throw 'Failed to fetch' instead of an HTTP error code?
The Fetch API promise resolves successfully even if the server returns error statuses (like 404 or 500). It only rejects (throwing 'Failed to fetch') if the request cannot be completed due to DNS, network, CORS, or SSL failures.
Q: How do I check for internet connection?
You can check the browser's connectivity flag `navigator.onLine` or monitor events using `window.addEventListener('offline', ...)`.
Q: Can CORS cause 'Failed to fetch'?
Yes. If the destination server does not return the correct CORS headers, the browser blocks the response at the network layer, which is reported to the script as a generic 'Failed to fetch'TypeError.
Q: How do I debug SSL issues in fetch?
Inspect the browser's console or developer Network tab. It will specify if the request failed due to untrusted certificates or expired handshakes.