当前位置：首页 > article >正文

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

article 2025/1/7 23:54:28

使用 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

配置说明

设置 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。
添加 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;：设置预检请求的缓存时间，单位为秒。此设置可减少频繁的预检请求，提高性能。
处理预检请求：
- if ($request_method = OPTIONS) { return 204; }：对 OPTIONS 请求返回 204 状态码，表示请求成功但无内容返回。这样可以有效处理浏览器发起的预检请求。

常见问题

如何调试 CORS 问题？
- 使用浏览器的开发者工具，查看网络请求的响应头部，确认 CORS 头部是否正确设置。
- 检查是否存在跨域错误信息，确保允许的来源匹配请求来源。
如何处理多个允许的来源？
- 可以将多个域名用 | 连接，添加到正则表达式中。
- 另一种方法是通过 Lua 脚本或其他处理逻辑动态判断来源。
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;
    
    # 设置跨域配置 Start
    set $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。