fetch: red, CORS y HTTP 404 — causa y solución

Si te aparece: Failed to fetch, respuesta 404 o petición que no trae datos

Solución rápida: Gestiona las excepciones de red con try/catch y comprueba response.ok antes de procesar los datos.

Qué está pasando

La URL puede no estar disponible, CORS puede bloquear el acceso o la respuesta puede llegar con un estado HTTP fallido.

Cómo corregirlo

✕ Código problemático

const respuesta = await fetch('/api/producto');
const datos = await respuesta.json(); // Ignora response.ok

✓ Código corregido

async function cargar() {
  try {
    const respuesta = await fetch('/api/producto');
    if (!respuesta.ok) throw new Error('HTTP ' + respuesta.status);
    return await respuesta.json();
  } catch (error) {
    console.error('No se pudo cargar:', error.message);
  }
}

Cómo comprobarlo

Prueba con una URL válida y una ruta 404. El error HTTP se distingue de un fallo de conexión.

Ten en cuenta

Este ejemplo requiere una aplicación con acceso a red: el laboratorio aislado de AprenderJavaScript bloquea las solicitudes externas.