使用 Nginx 轻松处理跨域请求（CORS）

使用 Nginx 轻松处理跨域请求（CORS）

在现代 Web 开发中，跨域资源共享（CORS）是一种重要的机制，用于解决浏览器的同源策略限制。CORS 允许服务器声明哪些来源可以访问其资源，从而确保安全性与可用性。本文将介绍如何在 Nginx 中配置跨域访问，并详细解析每个配置项的作用和用法。

什么是 CORS？

CORS（Cross-Origin Resource Sharing）是一种 HTTP 头部机制，允许服务器声明哪些外部域（origin）可以访问其资源。由于安全原因，浏览器通常不允许跨域请求，但通过 CORS，服务器可以显式地允许某些域访问其资源。

为什么需要 CORS？

• 安全性：保护用户数据，防止恶意网站进行未授权访问。
• API 访问：允许前端应用（如 React、Vue.js 等）安全地调用后端 API。
• 多源共享：在不同的子域、域或协议间共享资源。

Nginx 跨域配置示例

下面是一个 Nginx 跨域配置的示例代码：

# 设置跨域配置 Startset$cors_origin"";if($http_origin ~* "^(https://x1.domain.com|https://x2.domain.com)$"){set$cors_origin$http_origin;}
add_header Access-Control-Allow-Origin $cors_origin always; 
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
add_header Access-Control-Max-Age 1728000 always;# 预检请求处理if($request_method= OPTIONS){return204;}# 设置跨域配置 End

配置说明

1. 设置 CORS Origin：- set $cors_origin "";：初始化 CORS 源为空，以备后续条件使用。- if ($http_origin ~* "^(https://x1.domain.com|https://x2.domain.com)$")：正则表达式用于匹配允许的来源。此示例中，只有来自 mnswx.xjyun.cn 的请求会被允许。- set $cors_origin $http_origin;：如果来源匹配，则将 $http_origin 的值赋给 $cors_origin。
2. 添加 CORS 相关头部：- add_header Access-Control-Allow-Origin $cors_origin always;：设置允许的来源。如果 $cors_origin 为空，将不会返回该头部，从而避免潜在的安全问题。- add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;：指定允许的 HTTP 方法。可以根据需求添加或删除方法。- add_header Access-Control-Allow-Credentials true always;：允许客户端发送凭证（如 cookies）。如果需要此项，客户端的请求也需要设置 withCredentials。- add_header Access-Control-Allow-Headers ...：允许特定的自定义请求头，确保前端应用能够发送必要的自定义头部。- add_header Access-Control-Max-Age 1728000 always;：设置预检请求的缓存时间，单位为秒。此设置可减少频繁的预检请求，提高性能。
3. 处理预检请求：- if ($request_method = OPTIONS) { return 204; }：对 OPTIONS 请求返回 204 状态码，表示请求成功但无内容返回。这样可以有效处理浏览器发起的预检请求。

常见问题

1. 如何调试 CORS 问题？- 使用浏览器的开发者工具，查看网络请求的响应头部，确认 CORS 头部是否正确设置。- 检查是否存在跨域错误信息，确保允许的来源匹配请求来源。
2. 如何处理多个允许的来源？- 可以将多个域名用 | 连接，添加到正则表达式中。- 另一种方法是通过 Lua 脚本或其他处理逻辑动态判断来源。
3. CORS 和安全性- CORS 不是安全机制，而是一个合规性声明。确保只允许信任的域访问资源，以降低安全风险。

完整配置示例

以下是一个更完整的示例，展示了如何在 Nginx 的 server 块中配置 CORS：

server
{
    listen 80;
    listen 443 ssl http2;
    server_name x.domain.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/domain.com/public;# 设置跨域配置 Startset$cors_origin"";if($http_origin ~* "^(http://https://x1.domain.com|https://x2.domain.com)$"){set$cors_origin$http_origin;}
    add_header Access-Control-Allow-Origin $cors_origin always; 
    add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
    add_header Access-Control-Allow-Credentials true always;
    add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
    add_header Access-Control-Max-Age 1728000 always;# 预检请求处理if($request_method= OPTIONS){return204;}# 设置跨域配置 End#禁止在证书验证目录放入敏感文件if($uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$"){return403;}

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;}

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;}
    
    access_log  /www/wwwlogs/x.domain.com.log;
    error_log  /www/wwwlogs/rc.kkdl.cn.error.log;}

在这个示例中，

x1.domain.com

和

x2.domain.com

域名的请求将启用 CORS 配置。

如果需要让Cors只对某一个路径的请求生效，可以参考一下配置示例：

server {
    listen 80;
    server_name example.com;

    location /api/ {set$cors_origin"";if($http_origin ~* "^(http://example.com|https://example.com)$"){set$cors_origin$http_origin;}
        add_header Access-Control-Allow-Origin $cors_origin always;
        add_header Access-Control-Allow-Methods GET, POST, OPTIONS always;
        add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization always;
        add_header Access-Control-Allow-Credentials true always;
        add_header Access-Control-Max-Age 86400 always;if($request_method= OPTIONS){return204;}

        proxy_pass http://backend_server;# 将请求代理到后端服务器}}

在这个示例中，

/api/

路径下的请求将启用 CORS 配置，并且请求将被代理到

backend_server

。

结论

通过上述配置，Nginx 能够正确处理跨域请求，允许指定的来源访问资源。合理的跨域配置不仅可以增强 Web 应用的灵活性，还能提高安全性。在实际应用中，记得根据需要进行调整和优化。希望本文对您有所帮助，欢迎讨论与交流。