JavaScript and API errorTypeError: “Failed to fetch”

Why fetch rejected, and the fix

1. 01

   No usable response: CORS, network or blocked request

   “The promise returned by fetch() will reject on some errors, such as a network error or a bad scheme.” MDN, Using the Fetch API

   fetch() rejects only when the request could not complete: the network is down, the server is unreachable, CORS hides the response, or the browser blocked the request. The message is the same for all of them, so the console and Network tab are where the real reason shows.

2. 02

   The user is offline or the connection dropped

   “There is a network error (for example, because the device does not have connectivity).” MDN, Window: fetch() method, exceptions

   On phones and flaky Wi-Fi, a request can fail mid-way. Treat it as an expected state: catch it, tell the user, and let them retry.

   async function load() {
     try {
       const res = await fetch('/api/items');
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       return await res.json();
     } catch (err) {
       if (err instanceof TypeError) showBanner('You seem to be offline. Try again.');
       throw err;
     }
   }

3. 03

   A wrong, relative or http:// URL

   A wrong host, a typo, or a base URL pointing at a host that does not exist (a DNS failure) makes fetch reject, and an http:// API from an https:// page is blocked as mixed content. A relative URL such as undefined/api/items gives a 404 instead, so log the full URL you are calling once, in the deployed build.

   const base = API_URL ?? '';
   if (base && !base.startsWith('https://') && !base.startsWith('/')) {
     console.warn('API URL is not https:', base);
   }

4. 04

   An ad blocker or extension cancelled it

   Privacy extensions block requests to URLs that look like tracking, such as /analytics, /track or known third-party hosts. It fails only for some users. Test in a private window without extensions, and give your own endpoints neutral names.

Checked against the vendor’s docs on November 8, 2026: MDN: Using the Fetch API; MDN: Window fetch() method.

Rather hand it over?

Fixed scope, fixed price, paid upfront. The work happens in writing; no call needed.

• from $450App Fix TicketOne reproducible bug in an existing mobile or web app, diagnosed and fixed.See scope and start
• from $450AI-Built App RescueA Lovable, Bolt or Cursor app checked end to end in 3 days, then its worst problems fixed at a fixed price.No issues worth fixing, no charge. If the Launch Check finds nothing rated medium or higher, Simon refunds the full $450. You keep the report either way. This applies to the first 10 Launch Checks bought after October 30, 2026.See scope and start

Related: “Blocked by CORS policy” · Axios “Network Error” · Supabase “Failed to fetch” in a published app