CORS
Resumen
CORS (Cross-Origin Resource Sharing, intercambio de recursos entre orígenes) es un mecanismo de seguridad con el que el navegador web controla las peticiones a orígenes distintos (la combinación de protocolo + dominio + puerto). Por defecto, el navegador aplica la política del mismo origen (Same-Origin Policy) y restringe las peticiones de JavaScript a orígenes distintos. CORS ofrece un mecanismo que solo deja pasar las peticiones de los orígenes que el servidor ha permitido de forma explícita.
Por qué hace falta la política del mismo origen
Sin la política del mismo origen, un sitio web malicioso podría enviar peticiones a través del navegador del usuario al sitio de un banco o a las redes sociales en los que ha iniciado sesión y leer sus respuestas. Como el navegador añade las cookies de forma automática, incluso una petición enviada desde el sitio del atacante llega al servidor con las credenciales del usuario incluidas.
CORS está diseñado como un «mecanismo de excepción» que mantiene esta política y a la vez hace posible la comunicación legítima entre orígenes distintos.
Cómo funciona la petición de comprobación previa
En las peticiones a orígenes distintos que no son peticiones simples (GET, HEAD o POST con ciertos Content-Type), el navegador envía antes de la petición real una «petición de comprobación previa» (preflight) con el método OPTIONS. El servidor responde con cabeceras como Access-Control-Allow-Origin, Access-Control-Allow-Methods y Access-Control-Allow-Headers indicando los orígenes, los métodos y las cabeceras que permite.
El navegador revisa la respuesta de la comprobación previa y solo envía la petición real si está permitida. Gracias a este mecanismo en 2 pasos, el servidor puede decidir si acepta la petición antes de procesar la petición real.
El diseño de CORS en un servicio de buzón de preguntas
Si el frontend y la API del backend funcionan en orígenes distintos, hace falta configurar CORS. En una configuración que usa CloudFront para colocar el frontend y la API en rutas distintas del mismo dominio, el origen es el mismo, así que no surge el problema de CORS.
Esta «configuración de mismo origen» es un recurso de diseño para evitar la complejidad de CORS. Al dirigir la ruta /api/* a la API y todo lo demás al frontend, desde el punto de vista del navegador todas son peticiones al mismo origen. Así se eliminan los agujeros de seguridad causados por errores en la configuración de las cabeceras CORS y el aumento de la latencia por las peticiones de comprobación previa.