CORS

CORS (Cross-Origin Resource Sharing) es el mecanismo del navegador que controla cuándo JavaScript de un origen puede leer respuestas de otro. Por defecto, los navegadores bloquean las respuestas XHR/fetch entre orígenes — las cabeceras CORS del servidor desbloquean el acceso controlado.

Las dos principales cabeceras de respuesta:

• Access-Control-Allow-Origin: qué orígenes pueden leer la respuesta. Puede ser un origen específico o * (cualquiera).
• Access-Control-Allow-Credentials: si se permite que las cookies fluyan con solicitudes entre orígenes. true requiere que el origen sea específico, no *.

Para solicitudes que no son “simples” (cabeceras personalizadas, métodos distintos de GET/POST, cuerpos JSON), el navegador envía primero una solicitud OPTIONS de preflight para verificar qué está permitido. El servidor responde con Access-Control-Allow-Methods y Access-Control-Allow-Headers; la solicitud real solo se ejecuta si el preflight tiene éxito.

Conceptos erróneos comunes: CORS no es un mecanismo de seguridad del lado del servidor — es una restricción aplicada por el navegador que protege a los usuarios de que un sitio lea datos en su nombre desde otro sitio. Los servidores aún pueden recibir y procesar solicitudes de origen cruzado; CORS solo controla si el navegador entrega la respuesta al JS que realizó la llamada.

Qué significa “origen” con precisión: la tupla (esquema, host, puerto). http://ejemplo.com y https://ejemplo.com son orígenes diferentes (esquema diferente). https://api.ejemplo.com y https://ejemplo.com son orígenes diferentes (subdominio diferente). https://ejemplo.com:8080 y https://ejemplo.com son orígenes diferentes (puerto diferente). Esta es la política del mismo origen sobre la que CORS agrega excepciones. Internet Explorer ignoraba la parte del puerto — una peculiaridad que produjo años de errores entre navegadores hasta que la retirada de IE eliminó la cuestión.

Problemas comunes en producción: el comodín Access-Control-Allow-Origin: * bloquea las credenciales según la especificación; si necesita cookies en una solicitud entre orígenes debe devolver el Origin de la solicitud específicamente. Añadir una cabecera Authorization convierte la solicitud de “simple” a “con preflight”, duplicando los viajes de ida y vuelta — almacenar en caché el preflight mediante Access-Control-Max-Age (hasta 7200 segundos en Chrome, 600 en Firefox) es la mitigación estándar. Por último, el error CORS del navegador en la consola DevTools es genuinamente una decisión del navegador — los registros del servidor mostrarán que la solicitud llegó al backend y se procesó normalmente; la respuesta simplemente fue descartada en el lado del cliente. Referencia: WHATWG Fetch — Protocolo HTTP-CORS.

Ejemplo práctico: un POST JSON con preflight

Una SPA en https://app.ejemplo.com envía JSON con un token bearer a https://api.ejemplo.com/v1/orders. Como la solicitud usa Content-Type: application/json y una cabecera Authorization, no es simple. El navegador primero envía OPTIONS /v1/orders con Origin: https://app.ejemplo.com, Access-Control-Request-Method: POST y Access-Control-Request-Headers: authorization,content-type. El servidor responde 204 con Access-Control-Allow-Origin: https://app.ejemplo.com, Access-Control-Allow-Methods: POST, Access-Control-Allow-Headers: authorization,content-type y Access-Control-Max-Age: 600. Solo entonces se ejecuta el POST real. Configurar Max-Age: 600 evita el preflight durante los próximos 10 minutos, eliminando un viaje de ida y vuelta de cada llamada subsiguiente — medible como una reducción de 50-100 ms en enlaces trasatlánticos.

Cuando CORS no es suficiente

CORS protege a los usuarios de lecturas entre orígenes; no protege a los servidores de solicitudes no deseadas. Los endpoints que cambian de estado aún necesitan tokens CSRF o cookies SameSite, y la autenticación aún necesita validación adecuada de tokens en el servidor. Una API pública detrás de Access-Control-Allow-Origin: * es accesible públicamente por cualquiera — CORS simplemente permitió al navegador revelar ese hecho. Para más contexto arquitectónico, consulte la referencia CORS de MDN, que refleja la especificación WHATWG con ejemplos prácticos.