解决Nginx配置跨域请求报错Access-Control-Allow-Origin问题

当你在Nginx配置中设置Access-Control-Allow-Origin *但仍然遇到跨域问题时，可能是由于配置不完整或存在其他限制。以下是完整的解决方案：

完整跨域配置方案

在Nginx配置文件中添加以下内容：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        # 基础跨域设置
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;

        # 处理OPTIONS预检请求
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        # 你的其他配置...
    }
}

常见问题排查

1. 配置位置错误：

   • 确保跨域头是添加到正确的location块中
   • 对于API接口，可能需要添加到特定的API路径下

2. 缺少always关键字：

   • 在Nginx中，默认只在成功响应(2xx, 3xx)时添加头
   • 使用always确保在所有响应中都添加头

3. 预检请求(OPTIONS)未处理：

   • 复杂请求(如带自定义头的请求)会先发送OPTIONS预检请求
   • 需要单独处理OPTIONS方法

4. 缓存问题：

   • 浏览器可能会缓存跨域响应头
   • 开发时可禁用缓存或使用Access-Control-Max-Age控制缓存时间

5. 凭证问题：

   • 如果请求带有凭证(cookie, HTTP认证)，不能使用*通配符
   • 需要明确指定允许的域名：add_header 'Access-Control-Allow-Origin' 'https://yourdomain.com'

高级配置选项

1. 多域名支持：

map $http_origin $cors_origin {
    default "";
    "~^https://(domain1.com|domain2.com)$" $http_origin;
}

server {
    # ...
    add_header 'Access-Control-Allow-Origin' $cors_origin;
}

2. 带凭证的请求：

add_header 'Access-Control-Allow-Credentials' 'true';
# 注意: 此时不能使用 * 作为 Allow-Origin 的值

3. Vary头：

add_header 'Vary' 'Origin';

配置完成后，记得测试并重新加载Nginx配置：

sudo nginx -t  # 测试配置
sudo nginx -s reload  # 重新加载配置

如果问题仍然存在，请检查浏览器控制台的具体错误信息，它们通常会提供更详细的线索。