Compartición de Recursos Cross-Origin
Cross-Origin Resource Sharing (CORS) es un mecanismo definido por headers HTTP que permite a los servidores especificar cómo los recursos pueden ser pedidos desde diferentes orígenes. Mientras que SOP restringe las páginas por defecto para que sólo puedan hacer peticiones desde el mismo dominio, CORS permite a los servidores declarar excepciones a esta política.
CORS opera a través de headers HTTP configurados que el servidor manda como parte de su respuesta al navegador. Estos headers informan al navegador sobre la política CORS del servidor, como qué orígenes son permitidos para acceder a los recursos, qué métodos HTTP están permitidos y si las credenciales deben ser incluidas en la petición. Es importante tener en cuenta que el servidor no bloquea o permite basado en CORS, sino que procesa la petición e incluye dichos headers CORS en la respuesta. El navegador lo interpreta y fuerza la política dando o denegando acceso al JavaScript de la página para acceder a la respuesta.
Diferentes Headers HTTP Involucrados en CORS
- Access-Control-Allow-Origin: Este header especifica los dominios que tienen permitido acceder a recursos. Por ejemplo:
Access-Control-Allow-Origin: example.compermite sólo peticiones deexample.com. - Access-Control-Allow-Methods: Especifica los métodos HTTP (GET, POST, etc.) que pueden ser usados durante la petición.
- Access-Control-Allow-Headers: Indica qué headers HTTP pueden ser usados durante la petición real.
- Access-Control-Max-Age: Define cuánto tiempo los resultados de una petición preflight pueden ser cacheados.
- Access-Control-Allow-Credentials: Este header le indica al navegador si exponer la respuesta al código JavaScript del frontend cuando hay credenciales como cookies, autentificación HTTP o certificados SSL en la petición. No se puede configurar como
*y hay que especificar el dominio exacto por seguridad.
Escenarios Comunes Donde se Aplica CORS
CORS suele aplicarse en escenarios como:
- APIs y Servicios Web: Cuando una aplicación web de un dominio necesita acceder a una API hosteada en un dominio diferente, CORS permite esta interacción.
- Redes de Entrega de Contenido (CDNs): Muchos sitios web usan CDNs para cargar librerías como jQuery o fuentes.
- Web Fonts: Para que las fuentes web sean usadas a lo largo de diferentes dominios, los headers CORS deben estar configurados, permitiendo a las webs cargar fuentes de una localización centralizada.
- Plugins/Widgets de Terceros: Para permitir funcionalidades como botones de redes sociales o chatbots de terceros en una página web.
- Autentificación de Usuario Multi-Dominio: Servicios que ofrecen single sign-on (SSO) o usan tokens (como OAuth) para autentificar a usuarios a lo largo de varios dominios.
Peticiones Simple vs Peticiones Preflight
Hay dos tipos principales de peticiones en CORS: peticiones simple y peticiones preflight.
- Simple Requests: Estas peticiones cumplen ciertos criterios configurados por CORS que las hacen "simple". Son tratados de forma similar a las peticiones same-origin, con algunas restricciones. Una petición es considerada simple si usa GET, HEAD o POST y el header
Content-Typede la petición POST es uno deapplication/x-www-form-urlencoded,multipart/form-dataotext/plain. Además, la petición no debería incluir headers personalizados que no sean CORS-safe. Estas peticiones se mandan directamente al servidor con el headerOriginy la respuesta está sujeta a la política CORS basada en el headerAccess-Control-Allow-Origin. Además, cookies y autentificación HTTP son incluidas en estas peticiones si la página ya las ha configurado aunque el headerAccess-Control-Allow-Credentialsseatrue. - Preflight Requests: Estas son peticiones CORS que el navegador pre-manda con OPTIONS antes de mandar la petición real para asegurar que el servidor aceptará la petición basado en su política CORS. Se dispara cuando una petición no se califica como simple, como cuando usamos métodos HTTP distintos de GET, HEAD o POST o cuando las peticiones POST están hechas con header
Content-Typediferente que el valor permitido para peticiones simples o cuando se incluyen headers personalizados. La petición preflight incluye headers comoAllow-Control-Request-MethodoAccess-Control-Request-Headers, indicando el método y headers personalizados de la petición real. El servidor debe responder con headers CORS apropiados, comoAccess-Control-Allow-Methods,Access-Control-Allow-HeadersyAccess-Control-Allow-Originpara indicar que se permite la petición real. Si la petición preflight resulta exitosa, el navegador mandará la petición real con las credenciales incluidas siAccess-Control-Allow-Credentialsestá entrue.
Procesado de una Petición CORS

La tabla de flujo superior muestra el procesado básico de una petición CORS.
- El navegador manda una petición HTTP al servidor.
- El servidor comprueba si el header Origin está en la lista de orígenes permitidos.
- Si el origen está permitido, el servidor responde con el header
Access-Control-Allow-Originapropiado. - El navegador bloqueará la petición cross-origin si el origen no está permitido.
