在现代 web 开发中，跨域请求是一个常见需求，浏览器出于安全考虑，默认会限制不同源之间的访问，这时，我们可以利用 Nginx 的反向代理功能和 CORS（跨域资源共享）机制来解决这个问题，本文将详细介绍如何在 Nginx 中配置跨域支持，以满足前后端分离的开发需求。

一、什么是跨域？

跨域问题源于浏览器的同源策略，它是指浏览器允许运行在某一个域名下的网页脚本访问另一域名下资源的能力，当两个不同的源尝试进行通信时，浏览器会阻止这种请求，而 CORS 是一种通过 HTTP 头部信息控制浏览器是否允许跨域请求的机制。

二、为什么需要防跨域？

跨域资源共享虽然提供了一种机制来解决跨域问题，但如果没有正确配置，可能会引发安全问题，恶意网站可能利用跨域漏洞获取用户的敏感信息，cookies、session 等，正确配置 CORS 至关重要。

三、Nginx 配置 CORS

1. 基本配置

我们需要在 Nginx 配置文件中添加add_header 指令来设置 CORS 相关的头部信息，以下是一个基本的示例：

server {
    listen       80;
    server_name  yourdomain.com;
    location /api/ {
        # 允许所有来源跨域访问
        add_header 'Access-Control-Allow-Origin' *;
        
        # 允许发送 cookie
        add_header 'Access-Control-Allow-Credentials' 'true';
        
        # 允许的 HTTP 方法
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        
        # 允许的请求头
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        
        # 暴露给客户端的头部信息
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        
        # 处理 OPTIONS 预检请求
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        
        # 代理到后端服务器
        proxy_pass http://backend_server:3000;
    }
}

2. 动态设置允许的来源

有时我们希望只允许特定的域名进行跨域请求，而不是所有的域名，这时可以使用map 指令动态设置允许的来源：

http {
    # 定义一个变量，用于存储允许的来源列表
    map $http_origin $allowed_origin {
        default "";
        ~^http://(www\.)?example\.com$ $http_origin;
        ~^http://(www\.)?anotherdomain\.com$ $http_origin;
    }
    
    server {
        listen 80;
        server_name yourdomain.com;
        
        location /api/ {
            if ($allowed_origin) {
                add_header 'Access-Control-Allow-Origin' "$allowed_origin";
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
                add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            }
            
            if ($request_method = 'OPTIONS') {
                return 204;
            }
            
            proxy_pass http://backend_server:3000;
        }
    }
}

3. 处理复杂场景

在实际开发中，我们还可能需要处理更复杂的场景，某些请求头或响应头需要进行特殊处理，这时可以结合 Nginx 的其他功能模块来实现。

server {
    listen 80;
    server_name yourdomain.com;
    
    location /api/ {
        add_header 'Access-Control-Allow-Origin' *;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
        
        if ($request_method = 'OPTIONS') {
            return 204;
        }
        
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_pass http://backend_server:3000;
    }
}

四、测试和验证配置

完成配置后，我们需要重启 Nginx 并测试配置是否正确：

sudo systemctl restart nginx

使用浏览器的开发者工具或者 curl 命令测试跨域请求是否正常工作：

curl -i -X OPTIONS http://yourdomain.com/api/resource

查看响应头中是否包含正确的 CORS 头部信息。

通过以上步骤，我们可以在 Nginx 中正确配置跨域支持，满足前后端分离的开发需求，需要注意的是，CORS 配置应尽量精确，避免使用通配符，以确保安全性，在处理复杂场景时，可以结合 Nginx 的其他功能模块实现更灵活的配置。