Un error CORS (Cross-Origin Resource Sharing) ocurre cuando un navegador bloquea una solicitud fetch o XMLHttpRequest a un origen diferente porque la respuesta del servidor no incluye el encabezado Access-Control-Allow-Origin requerido. Esta es una función de seguridad del navegador, no un fallo de red.
Por qué ocurre
- •El servidor API no incluye encabezados CORS en sus respuestas.
- •El servidor incluye encabezados CORS pero excluye el origen que realiza la solicitud.
- •El servidor no maneja una solicitud preflight OPTIONS.
- •Se envían credenciales (cookies, encabezados de autenticación) pero el servidor no permite solicitudes con credenciales.
Ejemplos
Código que causa el error
fetch("https://api.other-domain.com/data")
.then(res => res.json())
.then(console.log);Error en la terminal
Access to fetch at 'https://api.other-domain.com/data' from origin 'https://myapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Cómo solucionarlo
Configura el servidor API para devolver los encabezados CORS correctos. Para desarrollo, usa un proxy (Next.js rewrites, Vite proxy, etc.) para evitar solicitudes de origen cruzado. Nunca uses extensiones del navegador que deshabiliten CORS como solución de producción.
Código corregido
// The fix is on the SERVER, not the client.
// The API must return the header: Access-Control-Allow-Origin: *
// or: Access-Control-Allow-Origin: https://myapp.com
// Client-side workaround: proxy through your own backend
fetch("/api/proxy/data").then(res => res.json()).then(console.log);Errores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis