Failed to fetch

The browser never got a usable response: the server was unreachable, or the browser blocked the request or its reply.

Browser console
TypeError: Failed to fetch

Also appears as

  • TypeError: NetworkError when attempting to fetch resource.
  • TypeError: Load failed
  • AxiosError: Network Error

Prompt to fix it

My app throws "TypeError: Failed to fetch" in the browser console. Find the fetch call that fails and tell me which URL it requests and why it gets no response: a localhost or hardcoded URL in production, missing CORS headers, an http URL on an https page, or a server that isn’t running. Fix the root cause: read the API base URL from an environment variable, and fix the server’s CORS or HTTPS setup if that’s the problem. Add error handling that shows a friendly message. Don’t use mode: "no-cors", and don’t swallow the error silently.

Paste into Layerwise or any AI coding tool.

What it means

fetch rejects with this error when the request ends without an HTTP response your code can read. Error statuses such as 404 or 500 arrive as normal responses, so this one always points to the connection or to a browser rule.

The message is the same for every cause, on purpose: browsers keep network details away from scripts. The real reason is in the console line just above it, or in the Network tab, where the failed request shows a status such as (failed), CORS error, or (blocked:mixed-content).

When it only happens on the published site, the usual culprit is an API URL that still points to localhost. It works on your computer because your dev server runs there. Every visitor’s browser looks for that server on their own computer and finds nothing.

Common causes

  • The API URL points to localhost or an old preview address, so the server the browser tries to reach isn’t there.
  • The server answered without CORS headers, so the browser hid the response and logged a CORS error first.
  • The page is on https:// and calls an http:// API, which the browser blocks as mixed content.
  • An ad blocker or privacy extension blocked the request, which shows up as net::ERR_BLOCKED_BY_CLIENT.
  • The connection dropped before a reply: the server crashed, a proxy timed out, or the page navigated away mid-request.

How to fix it

  1. Open DevTools, find the red request in the Network tab, and read its status and the console message right above Failed to fetch.
  2. Open the request URL in a new tab or with curl. If it fails there too, the server is down or the address is wrong.
  3. Read the API base URL from an environment variable, such as VITE_API_URL or NEXT_PUBLIC_API_URL, and set the production value in your host’s settings.
  4. If the console shows a CORS or mixed content error, fix that error, and this one goes away with it.
  5. Try again in a private window with extensions turned off to rule out an ad blocker.
  6. Catch the error and show a clear message, since networks can fail even when the code is right.

Example fix

const API_URL = import.meta.env.VITE_API_URL;

export async function getItems() {
  let response: Response;
  try {
    response = await fetch(`${API_URL}/items`);
  } catch (error) {
    // No response at all: wrong host, server down, CORS, or a blocked request.
    throw new Error(`Could not reach ${API_URL}`, { cause: error });
  }
  if (!response.ok) throw new Error(`Request failed: ${response.status}`);
  return response.json();
}

Related errors

All errors
Access to fetch at 'https://api.example.com/items' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Blocked by CORS policy

The browser hid a response from another site because that server never said your site is allowed to read it.

GET http://localhost:3000/api/items net::ERR_CONNECTION_REFUSED

net::ERR_CONNECTION_REFUSED

Nothing was listening at that address and port, usually because the server isn’t running or the app is calling the wrong port.

Mixed Content: The page at 'https://my-app.com/' was loaded over HTTPS, but requested an insecure resource 'http://api.example.com/items'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: requested an insecure resource

Your secure https page tried to load data or code over plain http, and the browser blocked that request to keep the page secure.

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Your code expected JSON, but the server sent back an HTML page, usually a 404 page or your app’s own index.html.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs