--- title: "Soluciona el error Failed to fetch y distingue sus 3 causas" description: "TypeError: Failed to fetch significa que la solicitud no obtuvo respuesta HTTP. Una cabecera CORS ausente, un servidor caído y un host que no existe dan este mismo mensaje." canonical: "https://logbrew.co/es/errors/failed-to-fetch" last_updated: "2026-11-10" --- # Soluciona el error Failed to fetch y distingue sus 3 causas `TypeError: Failed to fetch` significa que la solicitud no obtuvo respuesta HTTP. Una cabecera CORS ausente, un servidor caído y un host que no existe dan este mismo mensaje. Probado el 10 de noviembre de 2026 con Chromium 152, @logbrew/browser 0.1.21 y @logbrew/sdk 0.1.44 Por [Furkan Erday](https://github.com/furkanerday). Furkan Erday es el fundador de LogBrew. Desarrolla LogBrew con Claude Code y Codex todos los días. Canonical: https://logbrew.co/es/errors/failed-to-fetch ## Qué nombra la causa de un `fetch()` fallido | Qué salió mal | `error.message` | Consola | | --- | --- | --- | | Sin cabecera `Access-Control-Allow-Origin` | `Failed to fetch` | Política CORS | | Nada escucha en el puerto | `Failed to fetch` | `ERR_CONNECTION_REFUSED` | | El host no tiene registro DNS | `Failed to fetch` | `ERR_NAME_NOT_RESOLVED` | | El servidor respondió 500 | No rechazó | `500` | 4 solicitudes a una API en otro origen. Una taza llena significa que el texto nombra la causa. ## Averigua qué causa tienes ### Abre la consola del navegador `fetch()` rechaza con el mismo `TypeError: Failed to fetch` en cada fallo de red. La línea de consola de al lado nombra la causa real. ### La API respondió sin cabecera CORS La consola dice `blocked by CORS policy`. El servidor sí respondió, pero el origen de la página no tiene permiso para leer la respuesta, así que el navegador la descarta. Salida ```text Access to fetch at 'http://127.0.0.1:4874/api/closed' from origin 'http://127.0.0.1:4873' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. ``` ### Nada escucha en ese host y puerto La consola dice `net::ERR_CONNECTION_REFUSED`. La API no está en marcha, o el puerto de la URL es incorrecto. Arráncala y luego revisa el puerto. Salida ```text Failed to load resource: net::ERR_CONNECTION_REFUSED ``` ### El nombre de host no se resuelve La consola dice `net::ERR_NAME_NOT_RESOLVED`. DNS no tiene registro para ese host. Revisa si hay una errata en el nombre de host y la variable de entorno que guarda la URL de la API en este despliegue. Salida ```text Failed to load resource: net::ERR_NAME_NOT_RESOLVED ``` ## Soluciónalo en tu código ### Envía la cabecera CORS desde la API Responde con `Access-Control-Allow-Origin` puesta en el origen de tu página, o `*` para una API pública. En nuestra prueba, el mismo endpoint pasó de `Failed to fetch` a `HTTP 200` solo con añadir esa cabecera. ```bash Access-Control-Allow-Origin: https://app.example.com ``` ### Comprueba el estado, porque un 500 no rechaza `fetch()` se resuelve con cualquier respuesta HTTP, incluidas 404 y 500. En nuestra prueba, un 500 con el cuerpo `{"error":"tap jammed"}` llegó a la rama `then`, no al `catch`. Comprueba `response.ok` antes de leer el cuerpo. ```bash const response = await fetch(url); if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`); ``` ### Registra la URL junto con el error Un `fetch()` rechazado no tiene respuesta, y su pila apunta a tu propio código, no a la causa. Captúralo donde llamas a `fetch()` y guarda el método y la URL con el error, para que tu seguimiento de errores muestre qué solicitud falló. ```bash try { return await fetch(url); } catch (error) { console.error("fetch failed", url, error); throw error; } ``` ## Lo que vimos al probarlo La página corrió en `http://127.0.0.1:4873` en Chromium 152 con `@logbrew/browser` 0.1.21 y su instrumentación de fetch instalada. Una API en `http://127.0.0.1:4874` respondía 3 rutas, y enviamos 5 solicitudes sin `catch`, así que cada rechazo llegó al SDK como un rechazo no manejado. `/api/closed` respondió 200 sin cabecera CORS, y la solicitud se rechazó con `TypeError: Failed to fetch`. Una solicitud al puerto 4875, donde nada escuchaba, y otra a `http://keg.invalid/api` se rechazaron con el mismo error. En los 3 casos, `error.message` era `Failed to fetch`, `error.name` era `TypeError` y la pila apuntaba a nuestra propia llamada a `fetch()`. La consola las distinguió. La primera decía `blocked by CORS policy`, la segunda `net::ERR_CONNECTION_REFUSED` y la tercera `net::ERR_NAME_NOT_RESOLVED`. `/api/broken`, que respondió 500 con la cabecera, no se rechazó, y `/api/open`, que respondió 200 con la cabecera, dio `HTTP 200 {"ok":true}`. ## Por qué todas las causas tienen el mismo mensaje El estándar Fetch convierte cada fallo previo a una respuesta en 1 sola cosa, un error de red, que es una respuesta con tipo `error` y estado 0. Un fallo de CORS también lo es. En modo `cors`, un recurso que no entiende el protocolo CORS da un error de red. El método `fetch()` rechaza su promesa con un `TypeError` por un error de red, y por nada más. MDN lo dice igual. La promesa solo se rechaza cuando la solicitud falla, por ejemplo con una URL mal formada o un error de red, y no con un estado HTTP como 404 o 504. La página de MDN sobre errores CORS dice que los detalles de una solicitud CORS fallida no están disponibles para JavaScript por razones de seguridad, y que la consola es el único lugar donde encontrarlos. whatwg/fetch#526 pide tipos de error más informativos desde 2017 y sigue abierto. ## Lo que LogBrew registra Cada rechazo llegó como 1 incidencia llamada `Unhandled promise rejection: TypeError`, con frames de pila dentro de nuestro bundle y la clave de agrupación `browser.unhandledrejection:TypeError:/app.js`. Eso te dice dónde llamaste a `fetch()`, no qué falló. La instrumentación de fetch añadió un span en la misma traza, `browser.fetch GET /api/closed`, con estado `error`, el método, la ruta de la solicitud y `errorType` `TypeError`. El span nombra la solicitud que falló aunque el error no lo haga. La respuesta 500 no produjo ninguna incidencia, solo un span con estado `error` y `statusCode` 500. La respuesta 200 produjo un span con estado `ok`. Así que en LogBrew un 500 y un fallo de red son 2 spans distintos, mientras que en tu código solo el segundo llega al `catch`. ## Preguntas frecuentes ### ¿Qué significa TypeError Failed to fetch? El navegador no pudo obtener una respuesta HTTP para una llamada a `fetch()`. El servidor era inalcanzable, el host no se resolvió o CORS bloqueó la respuesta. El mensaje es el mismo en los 3 casos. ### ¿Failed to fetch es siempre un error de CORS? No. En nuestra prueba, una cabecera CORS ausente, un puerto sin servidor y un host sin registro DNS dieron todos este mensaje. Solo la línea de consola de al lado nombra la causa. ### ¿Por qué fetch no rechaza con un 404 o un 500? El estándar Fetch solo rechaza por un error de red. Una respuesta HTTP con cualquier estado es una respuesta, así que `fetch()` se resuelve y tú compruebas `response.ok`. ### ¿Cómo capturo Failed to fetch en JavaScript? Envuelve la llamada en `try` y `catch`, o añade `.catch()` a la promesa. El error es un `TypeError` sin respuesta, así que registra tú mismo la URL y el método. ### ¿Failed to fetch significa que el servidor está caído? A veces. Un servidor caído da `net::ERR_CONNECTION_REFUSED` en la consola. El mismo `Failed to fetch` también viene de una cabecera CORS ausente o de un nombre de host sin registro DNS. ## Ve qué solicitud falló, y por qué El SDK de navegador de LogBrew registra cada `fetch()` como un span con su método, ruta y estado, en la misma traza que el error que provocó. Empieza con el generoso plan gratuito, sin tarjeta. [Empezar gratis](https://logbrew.co/es) ## Fuentes - [MDN, Window: fetch() method](https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch) - [MDN, CORS errors](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors) - [Fetch Standard, The fetch() method](https://fetch.spec.whatwg.org/#fetch-method) - [whatwg/fetch#526](https://github.com/whatwg/fetch/issues/526) ## Más soluciones a errores de JavaScript - [Soluciona el error Script error que oculta su mensaje, archivo y línea](https://logbrew.co/es/errors/script-error) - [Errores de JavaScript que reproducimos, y cómo solucionar cada uno](https://logbrew.co/es/errors)