解决Nginx跨域问题的方法

跨域问题(CORS)是前端开发中常见的问题，当你的前端应用尝试访问不同域名、端口或协议的后端API时就会出现。以下是几种在Nginx中解决跨域问题的方法：

1. 基础CORS配置

在Nginx配置文件中添加以下头部信息：

location / {
    # 允许的域名，*表示允许所有域名
    add_header 'Access-Control-Allow-Origin' '*';

    # 允许的请求方法
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';

    # 允许的请求头部
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';

    # 预检请求缓存时间
    add_header 'Access-Control-Max-Age' 1728000;

    # 允许浏览器在跨域请求中携带凭证
    # add_header 'Access-Control-Allow-Credentials' 'true';

    # 响应类型
    add_header 'Content-Type' 'application/json charset=UTF-8';

    # 对于OPTIONS请求直接返回204
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}

2. 针对特定域名允许跨域

如果你只想允许特定域名访问，可以这样配置：

add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com';
add_header 'Access-Control-Allow-Credentials' 'true';

3. 允许多个域名跨域

如果需要允许多个域名跨域访问，可以使用Nginx的变量和条件判断：

set $cors "";
if ($http_origin ~* "^https://domain1.com$") {
    set $cors $http_origin;
}
if ($http_origin ~* "^https://domain2.com$") {
    set $cors $http_origin;
}

location / {
    add_header 'Access-Control-Allow-Origin' $cors;
    # 其他CORS头部...
}

4. 完整示例配置

server {
    listen 80;
    server_name api.example.com;

    location / {
        # 处理简单请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 处理实际请求
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

        # 代理到后端服务
        proxy_pass http://backend;
    }
}

注意事项

1. 生产环境中不建议使用 '*' 作为 Access-Control-Allow-Origin 的值，这会导致安全风险
2. 如果使用了 Access-Control-Allow-Credentials: true，则 Access-Control-Allow-Origin 不能为 '*'，必须指定具体域名
3. 修改配置后记得重新加载Nginx：nginx -s reload

调试技巧

如果配置后仍然出现跨域问题，可以：

1. 使用浏览器开发者工具查看响应头是否正确
2. 使用curl命令测试：curl -I -X OPTIONS http://your-api-endpoint
3. 检查Nginx错误日志：tail -f /var/log/nginx/error.log

希望这些方法能帮助你解决Nginx跨域问题！