Lingua-e
← Errores
JavaScript

Qué significa Error CORS y cómo solucionarlo

Referencia del error

Error CORS

Lenguaje

JavaScript

Severidad

Alta

Cuándo ocurre

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.

Posibles soluciones

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.

Errores relacionados

Error de red en fetchUnhandledPromiseRejection

Más detalles

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.

Posibles soluciones

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.

Ejemplos

JavaScript

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ó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);

Practica en inglés

¿Cómo le explicarías un CORS Error a un compañero dev? Elige la frase correcta:

"I hit an error...

¿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