Failed to fetch 🟨 JavaScript

TypeError: Failed to fetch / NetworkError when attempting to fetch resource

The browser couldn’t complete the request at the network level — CORS, DNS, offline, blocked mixed content, or the server refused the connection.

Seen on: JavaScript

Meaning

fetch() rejects (instead of resolving with a status) only when no HTTP response could be used: the server was unreachable, the request was blocked by CORS or the browser, or it was aborted. The console usually has a second, more specific message right above it.

Common causes

  • CORS blocked the response (check console for the CORS message)
  • Server down or wrong host/port
  • Mixed content: HTTPS page calling an HTTP API
  • Ad blocker/privacy extension blocking the URL
  • Self-signed or invalid TLS certificate
  • Request aborted by navigation or AbortController

⚡ Quick fix

  1. Read the console message just above “Failed to fetch”
  2. Open the API URL directly in a tab — does it load?
  3. Use HTTPS for the API when the page is HTTPS
  4. Try with extensions disabled (incognito)

Detailed fix by platform

JavaScript

  1. Wrap fetch in try/catch and show a network-specific message; distinguish err.name === 'AbortError'.

How to diagnose

  1. Console — CORS, mixed content or certificate message?
  2. Reachability — Does the URL respond outside the app?
  3. Network tab — Is the request marked (blocked), (failed) or CORS error?

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.