¿Qué es CORS?

También llamado: Cross-Origin Resource Sharing, error de CORS, Access-Control-Allow-Origin

Definición

CORS es el mecanismo por el que un servidor indica al navegador qué otras webs pueden leer sus respuestas desde JavaScript. Sin esa autorización, el navegador bloquea las peticiones entre dominios distintos.

Por seguridad, los navegadores aplican la política del mismo origen: el JavaScript de https://app.example.com no puede leer respuestas de https://api.example.net salvo que esa API lo permita expresamente. CORS es la forma de dar ese permiso con cabeceras HTTP.

Ejemplo

El error típico en la consola del navegador:

Access to fetch at 'https://api.example.net/datos' from origin 'https://app.example.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present.

La solución es en el servidor de la API, respondiendo con:

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, Authorization

Para peticiones «no simples» (con PUT, DELETE, JSON o cabeceras propias), el navegador envía antes una petición OPTIONS de comprobación (preflight), que el servidor también debe contestar con estas cabeceras.

Cosas que conviene saber

CORS solo lo aplican los navegadores. Con curl o desde otro servidor la misma petición funciona, por eso «en Postman va bien».
No es una protección del servidor: impide que otras webs lean la respuesta en el navegador del usuario, pero no bloquea las peticiones.
Una solución rápida es poner la API detrás del mismo dominio que la web con un proxy inverso.

Errores habituales

Poner Access-Control-Allow-Origin: * en una API que usa cookies o datos privados. Los navegadores no permiten * con credenciales, y reflejar cualquier origen a ciegas expone los datos de los usuarios.

¿Tienes un producto o servicio relacionado con CORS? Anúnciate en este término.

Términos relacionados

Categorías: Web Seguridad Backend