¿Qué es CORS?

CORS (Cross-Origin Resource Sharing) — es un mecanismo que permite a las páginas web solicitar recursos desde otro dominio, puerto o protocolo diferente al que se cargó la página. Esto se realiza mediante encabezados HTTP adicionales.

Por defecto, los navegadores aplican la política Same-Origin Policy (SOP), que prohíbe a los scripts en una página acceder a datos de otra fuente (dominio, puerto, protocolo). CORS relaja esta política de manera controlada, permitiendo que el servidor indique explícitamente qué solicitudes entre dominios están permitidas.

Cómo funciona CORS:

Solicitud simple: Si la solicitud cumple con ciertos criterios (por ejemplo, se usa el método GET o POST, solo se permiten ciertos encabezados), el navegador envía la solicitud directamente con un encabezado adicional Origin que indica la fuente de la solicitud. El servidor, al recibir este encabezado, puede responder con el encabezado Access-Control-Allow-Origin que indica la fuente permitida.
Preflight: Para solicitudes "no simples" (por ejemplo, usando métodos PUT, DELETE, o con encabezados personalizados), el navegador primero envía una solicitud preliminar (OPTIONS). Esta solicitud pregunta al servidor si la solicitud principal está permitida. El servidor responde con encabezados que indican los métodos, encabezados y fuentes permitidos. Si la preflight tiene éxito, el navegador envía la solicitud real.

Encabezados principales de CORS:

Origin: Enviado por el navegador en la solicitud, indica la fuente (dominio, puerto, protocolo) de la página que realiza la solicitud.
Access-Control-Allow-Origin: Enviado por el servidor en la respuesta, indica la fuente que puede recibir la respuesta. Puede ser un dominio específico, * (cualquier fuente), o generado dinámicamente en función del encabezado Origin.
Access-Control-Allow-Methods: Enviado por el servidor en respuesta a la preflight, indica los métodos HTTP permitidos (GET, POST, PUT, DELETE, etc.).
Access-Control-Allow-Headers: Enviado por el servidor en respuesta a la preflight, indica los encabezados permitidos en la solicitud.
Access-Control-Allow-Credentials: Enviado por el servidor en la respuesta, indica si se permiten cookies y otras credenciales en la solicitud.

Ejemplo de encabezados de respuesta del servidor que permiten solicitudes desde https://example.com:

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

CORS es necesario para el correcto funcionamiento de muchas aplicaciones web que utilizan solicitudes AJAX entre dominios, como la interacción con API, carga de fuentes, uso de Web Fonts con CDN, etc. La configuración correcta de CORS en el servidor es crucial para la seguridad y funcionalidad de la aplicación.