integracion

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.

Revisado en agosto de 2026

De paso

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.

Diagnóstico

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.

Solución

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.

  1. 01Si 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.
  2. 02Si 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.
  3. 03Si 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.
  4. 04Si 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.
  5. 05Comprueba 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 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.

Si no sale

¿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.

Las 10 primeras apps son gratis. Estoy empezando y necesito casos reales. A cambio te pido permiso para contar después qué me encontré, sin decir de quién era la app ni enseñar tus datos. Sin tarjeta y sin suscripción: cuando se acaben las plazas empezaré a cobrar y lo diré aquí.

Cita a partir de mañana

Agendar revisión

Gratis

durante el lanzamiento

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

Hoy, en cola prioritaria

Rescate exprés

Gratis

durante el lanzamiento

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

Quién

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, explicándote qué ha pasado sin jerga.