Failed to fetch

Tu app ha intentado pedir datos a algún sitio y la petición no ha llegado a completarse. El navegador no te dice por qué a propósito: este mensaje es deliberadamente vago por motivos de seguridad, y por eso desespera tanto.

Ya de paso: ¿tu app está exponiendo datos?

Analízala gratis mientras lees. Tarda treinta segundos y no toca nada.

Solo leemos lo que tu app ya le entrega a cualquier visitante.

Por qué te pasa

Es el error menos informativo que existe, porque cubre cuatro situaciones distintas. La más común con diferencia es CORS: tu app está en un dominio y pide datos a otro, y ese otro servidor no ha dicho explícitamente que acepte peticiones desde el tuyo. El navegador bloquea la respuesta antes de que tu código la vea.

Las otras tres: que la dirección a la que llama esté mal escrita o llegue vacía, y entonces pide a un sitio que no existe; que el servicio al otro lado esté caído o dormido, cosa habitual en los planes gratuitos que se suspenden por inactividad; o que estés llamando por http a algo servido por https, que el navegador corta sin avisar.

Para saber cuál de las cuatro es la tuya, abre las herramientas de desarrollo del navegador con F12, ve a la pestaña Console y mira el mensaje completo. Si aparece la palabra CORS o Access-Control-Allow-Origin, es la primera. Si ves un 404, es la segunda. Si no hay respuesta ninguna, es la tercera.

Lo que este error no significa

No significa que tus datos se hayan perdido ni corrompido. La petición ni siquiera ha llegado a ejecutarse: lo que falla es el camino, no el destino.
No significa que hayas escrito mal el código. En el caso más frecuente, el de CORS, tu código es correcto y lo que falta es un permiso en el otro extremo.
No es un ataque ni una brecha. Es, literalmente, el navegador protegiéndote de algo que no ha podido verificar.

Arréglalo tú, gratis

Antes de tocar nada, identifica cuál de las cuatro causas es la tuya con la consola del navegador. Cada una se arregla en un sitio distinto, y probar a ciegas es lo que convierte esto en una tarde perdida.

1Si el mensaje menciona CORS y tu backend es Supabase: entra en tu proyecto, Authentication y luego URL Configuration, y añade el dominio de tu app publicada en Site URL y en Redirect URLs. Supabase rechaza los dominios que no conoce.
2Si el mensaje menciona CORS y llamas a una API tuya: el permiso se da en el servidor de esa API, no en tu app. Tiene que responder con la cabecera Access-Control-Allow-Origin incluyendo el dominio de tu app.
3Si ves un 404: la dirección a la que llamas está mal o llega vacía. Comprueba en el panel de tu hosting que las variables de entorno con la dirección del backend existen y están bien escritas, y vuelve a desplegar.
4Si no hay ninguna respuesta: entra en el panel del servicio al que llamas y comprueba que está despierto. Los proyectos gratuitos de Supabase se pausan solos tras una semana sin uso, y se reactivan con un botón.
5Comprueba por último que la dirección empieza por https y no por http. Una app servida por https no puede llamar a http.

Y esto para la parte de código

Pégaselo tal cual al agente que escribió tu app. Está redactado para que te diga lo que ha hecho, no solo para que lo haga.

Prompt para pegarle a tu agente

Mi app da "Failed to fetch" al llamar a su backend. En la consola del navegador el mensaje completo dice: [PEGA AQUÍ EL MENSAJE COMPLETO DE LA CONSOLA].

Necesito que hagas esto:
1. Localiza en el código todas las llamadas de red que se hacen al arrancar la app y dime a qué direcciones van y de dónde sale cada dirección.
2. Comprueba si esas direcciones se construyen a partir de variables de entorno y si alguna puede quedar vacía o indefinida en producción. Si es así, añade una comprobación que falle con un mensaje claro diciendo qué variable falta.
3. Revisa que todas las direcciones usen https.
4. Envuelve las llamadas en un manejo de errores que distinga entre no haber podido conectar y haber recibido una respuesta de error, y que muestre al usuario un mensaje comprensible en vez de dejar la pantalla en blanco.

No cambies la lógica de negocio: solo el manejo de la conexión y los errores.

¿Lo has intentado y sigue sin salir?

O el escáner de arriba ha encontrado algo y prefieres no tocarlo solo. En cualquiera de los dos casos esto ya es de los gordos y merece un humano: no es que no hayas sabido, es que has llegado al punto en que hace falta alguien que entre y lo vea por dentro.

Cita a partir de mañana

Agendar revisión

99 €

Elegimos hueco, miro tu app con calma y te digo qué pasa y cómo se arregla.

Sesión de trabajo en directo contigo
Diagnóstico del error y del riesgo real
Te quedas con el arreglo aplicado

Ver huecos disponibles

Hoy, en cola prioritaria

Rescate exprés

199 €

Entras en la cola de hoy. Reservas hueco y lo dejamos resuelto en el día.

Hueco el mismo día
Prioridad sobre las revisiones agendadas
Mismo trabajo, antes

Ver huecos de hoy

Quién lo arregla

Marc Sala

IT Manager

Analista de ciberseguridad certificado por Google

No es un rating anónimo de un marketplace: es la persona que va a entrar en tu app. Reviso el código, encuentro qué falla y lo arreglo contigo delante.