Nginx反向代理配置后仍出现CORS跨域问题求助

你的核心问题是：前端请求直接绕过了Nginx代理，直接访问百度API地址，导致Nginx配置的代理和CORS规则完全没生效，这才是CORS错误的根源。以下是具体解决步骤：

一、修正前端请求路径 #

开发环境下Vue DevServer代理能生效，是因为你请求的是/oauth开头的相对路径。部署后如果前端代码仍写死https://aip.baidubce.com/oauth/...，就会直接跨域请求百度API，触发浏览器CORS拦截。

把请求地址改成相对路径：

// 错误写法（直接请求百度域名）
axios.get('https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&xxx')

// 正确写法（走自己域名的代理路径）
axios.get('/oauth/2.0/token?grant_type=client_credentials&xxx')

二、优化Nginx代理配置 #

即使修正了前端路径，原配置的CORS处理也存在漏洞，比如未处理OPTIONS预检请求，且add_header默认只在2xx/3xx响应中生效。调整后的配置如下：

#PROXY-START/multi

location /oauth/ {
    # 优先处理OPTIONS预检请求（浏览器跨域复杂请求必发）
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin '*';
        add_header Access-Control-Allow-Methods 'POST,PUT,GET,DELETE,OPTIONS';
        add_header Access-Control-Allow-Headers 'Content-Type,Authorization';
        add_header Access-Control-Max-Age 3600;
        add_header Content-Length 0;
        add_header Content-Type 'text/plain; charset=utf-8';
        return 204;
    }

    # 为所有响应添加CORS头（always确保错误响应也生效）
    add_header Access-Control-Allow-Origin '*' always;
    add_header Access-Control-Allow-Methods 'POST,PUT,GET,DELETE' always;
    add_header Access-Control-Allow-Headers 'Content-Type,Authorization' always;

    # 代理核心配置
    proxy_pass https://aip.baidubce.com/;
    proxy_set_header Host aip.baidubce.com;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_http_version 1.1;

    # 缓存配置（保留但不影响API请求）
    set $static_file 0;
    if ($uri ~* "\.(gif|png|jpg|css|js|woff|woff2)$") {
        set $static_file 1;
        expires 1m;
    }
    if ($static_file = 0) {
        add_header Cache-Control no-cache always;
    }
}
#PROXY-END/

关键改动说明 #

1. 新增OPTIONS请求处理：浏览器跨域复杂请求会先发OPTIONS预检，必须返回204并携带完整CORS头
2. add_header后加always：确保在5xx等错误响应中也能添加CORS头，避免拦截
3. 移除WebSocket相关配置：百度OAuth API不需要WebSocket，多余配置可能引发冲突

三、验证步骤 #

1. 重启Nginx使配置生效：执行nginx -s reload
2. 打开浏览器开发者工具，确认请求地址变为https://sheyh.cn/oauth/2.0/token
3. 查看响应头，确认包含Access-Control-Allow-Origin: *

内容的提问来源于stack exchange，提问作者Sheyh