Cómo configurar CORS en NGINX

Si estás desarrollando una aplicación web que consume datos de diferentes dominios, es probable que te hayas encontrado con el problema de CORS (Cross-Origin Resource Sharing) en algún momento. CORS es un mecanismo de seguridad que se utiliza en los navegadores web para evitar que una página web cargue recursos de otro dominio (por ejemplo, un archivo de JavaScript o una imagen). NGINX, uno de los servidores web más populares del mundo, también tiene una solución para manejar CORS. En este artículo, te explicaré cómo configurar CORS en NGINX para permitir o denegar el acceso a recursos de diferentes orígenes.

¿Qué es CORS?

CORS es un mecanismo que se utiliza en los navegadores para evitar que una página web cargue recursos de un dominio que es diferente al de la página web actual. Por ejemplo, si una página web en el dominio "example.com" intenta cargar un archivo JavaScript desde el dominio "cdn.example.net", el navegador bloqueará la solicitud del archivo JavaScript debido a la política de CORS. Esto es para prevenir ataques de seguridad como el Cross-Site Scripting (XSS) y el Cross-Site Request Forgery (CSRF).

¿Cómo funciona CORS?

Cuando un navegador intenta cargar un recurso de un dominio diferente, primero envía una solicitud al servidor del dominio. Si el servidor del dominio autoriza la solicitud, enviará una respuesta HTTP con una cabecera Access-Control-Allow-Origin que indica que la solicitud está autorizada. Si el servidor no autoriza la solicitud, el navegador bloqueará la respuesta y mostrará un error.

Configurando CORS en NGINX

Configurar CORS en NGINX es bastante sencillo. Hay dos directivas que debes agregar en el archivo de configuración de NGINX para habilitar CORS:

1. Agregar la cabecera "Access-Control-Allow-Origin" en las respuestas de NGINX.
2. Especificar los métodos HTTP permitidos.

Aquí está un ejemplo básico de cómo habilitar CORS en NGINX:


location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
...
}


Cabecera "Access-Control-Allow-Origin"

La cabecera "Access-Control-Allow-Origin" indica al navegador que el recurso solicitado puede ser accedido desde un dominio distinto. Puedes establecer "*"" para permitir que cualquier dominio acceda al recurso, o especificar dominios individuales. Aquí hay un ejemplo:


location / {
add_header 'Access-Control-Allow-Origin' 'http://example.com';
...
}


Métodos HTTP permitidos

La directiva "add_header 'Access-Control-Allow-Methods'" especifica los métodos HTTP permitidos para solicitudes de recursos. Debes establecer cada método que tu aplicación necesita utilizar. Aquí hay un ejemplo:


location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE';
...
}


Ejemplos de código

Supongamos que estás desarrollando una aplicación web en "http://localhost:8080" y necesitas acceder a datos de la API en "http://api.example.com". Aquí hay un ejemplo de cómo podrías habilitar CORS en NGINX:


server {
listen 80;
server_name localhost;

location /api {
proxy_pass http://api.example.com/;
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}
}


Conclusión

Configurando CORS en NGINX, hemos habilitado nuestra aplicación web para acceder a recursos de diferentes dominios. Recuerda que CORS es un mecanismo de seguridad importante y debes tener cuidado cuando permites el acceso a recursos de otros dominios. Si tienes preguntas o problemas, no dudes en consultarlo en la documentación oficial de NGINX.

Preguntas frecuentes

¿Qué es CORS precargado?

CORS precargado es una especificación de seguridad de CORS que permite a los navegadores determinar qué solicitudes necesitan ser preautorizadas. Esto ayuda a mejorar el rendimiento y reducir la superficie de ataque para los ataques de XSS y CSRF.

¿Cómo puedo comprobar si se ha habilitado CORS en mi aplicación web?

Puedes utilizar la herramienta de Depuración de Red en Google Chrome o Firefox para comprobar si se han agregado las cabeceras CORS. Busca la cabecera "Access-Control-Allow-Origin" en la respuesta de la solicitud. Si la cabecera está presente y permite el dominio de tu aplicación, CORS está habilitado.

¿Hay soluciones de terceros para manejar CORS en NGINX?

Sí, hay varias soluciones de terceros disponibles en línea, como el módulo ngx_http_headers_module de Openresty.

¿Cómo puedo habilitar CORS en mi servidor de aplicaciones con NGINX?

Para habilitar CORS en un servidor de aplicaciones con NGINX, debes seguir los mismos pasos que para habilitar CORS en NGINX. Asegúrese de que su servidor de aplicaciones este ejecutándose en NGINX y de que su archivo de configuración de NGINX esté configurado correctamente.

[nekopost slugs="ejemplos-de-ubicacion-de-ubicacion-nginx,que-significa-el-error-404-nginx,como-verifico-el-estado-de-nginx,habilitar-registros-de-depuracion-nginx,nginx-web-server-start-stop-reiniciar,instalar-nginx-ubuntu,instalar-multiples-dominios-nginx-server,nginx-con-docker-compose,use-la-directiva-de-los-archivos-de-prueba-nginx"]