使用 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 跨域配置的示例代码：

# 设置跨域配置 Start
set $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) {return 204;
}
# 设置跨域配置 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) {return 204;}# 设置跨域配置 End#禁止在证书验证目录放入敏感文件if ( $uri ~ "^/.well-known/.*.(php|jsp|py|js|css|lua|ts|go|zip|tar.gz|rar|7z|sql|bak)$" ) {return 403;}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) {return 204;}proxy_pass http://backend_server;  # 将请求代理到后端服务器}
}

在这个示例中，/api/ 路径下的请求将启用 CORS 配置，并且请求将被代理到 backend_server。

结论

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