Cómo usarlo
- Elige el servidor y si permites solo los orígenes indicados o cualquier origen.
- Escribe los orígenes tal como los envía el navegador: esquema, host y puerto, sin ruta. La barra final se elimina.
- Ajusta métodos, cabeceras de petición, cabeceras expuestas, credenciales y la caché del preflight, y copia la configuración.
Cómo funciona CORS
El navegador añade una cabecera Origin a las peticiones entre sitios. La respuesta debe llevar Access-Control-Allow-Origin con ese origen (o *) o JavaScript no podrá leerla. En las peticiones no simples llega antes un preflight OPTIONS, que hay que responder con los métodos y cabeceras permitidos.
| Cabecera | Significado |
|---|---|
| Access-Control-Allow-Origin | El único origen que puede leer la respuesta, o * |
| Access-Control-Allow-Methods | Métodos permitidos en la petición real |
| Access-Control-Allow-Headers | Cabeceras que puede enviar el cliente |
| Access-Control-Expose-Headers | Cabeceras de respuesta legibles desde JavaScript |
| Access-Control-Allow-Credentials | true para permitir cookies y autenticación HTTP |
| Access-Control-Max-Age | Segundos que se puede guardar la respuesta preflight |
Ejemplo resuelto
Orígenes https://example.com y https://app.example.com para nginx. Como son dos, el generador escribe un map que copia el Origin de la petición en $cors_origin solo si está en la lista:
map $http_origin $cors_origin {
default "";
"https://example.com" $http_origin;
"https://app.example.com" $http_origin;
}Dentro de location / envía Access-Control-Allow-Origin $cors_origin, Vary: Origin, los métodos, las cabeceras y Access-Control-Max-Age 86400, y responde a OPTIONS con return 204.
Errores frecuentes
- Una ruta o barra final en el origen. El navegador envía https://example.com, nunca https://example.com/ ni https://example.com/api.
- Olvidar Vary: Origin cuando el origen permitido cambia según la petición: una CDN podría servir la respuesta de un sitio a otro.
- Añadir cabeceras CORS en dos sitios (la aplicación y el proxy). Dos cabeceras Access-Control-Allow-Origin hacen que el navegador rechace la respuesta.