用 proxy_pass 解决跨域本质是让浏览器“看不见”跨域,前端请求发给同源的 nginx,再由 nginx 转发至后端,不触发浏览器跨域检查;核心在于路径转发(proxy_pass 末尾斜杠决定是否剥离前缀)和透传 host、x-real-ip、x-forwarded-for 三项请求头,且后端须监听 0.0.0.0 或 127.0.0.1。

用 proxy_pass 解决跨域,本质是让浏览器“看不见”跨域——前端请求发给 Nginx(同源),Nginx 再把请求转给后端(服务端之间无同源限制),整个过程不触发浏览器的跨域检查。
配置反向代理的核心要点
关键不在加 CORS 头,而在路径转发和请求头透传。以下四点缺一不可:
-
proxy_pass 地址必须带协议和端口:写成
http://127.0.0.1:8080/,不能只写127.0.0.1:8080,否则 502 报错 -
末尾斜杠决定路径处理方式:
proxy_pass http://127.0.0.1:8080/;→ 自动剥离/api/前缀,请求/api/users变成/usersproxy_pass http://127.0.0.1:8080;(无斜杠)→ 原样转发,/api/users变成/api/users -
必须透传三项关键请求头:
proxy_set_header Host $host;(避免后端路由识别为 127.0.0.1)proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; -
后端服务监听地址要正确:必须绑定
0.0.0.0:8080或127.0.0.1:8080,不能只绑localhost:8080(部分系统解析异常)
一个可直接用的 location 配置示例
假设前端域名是 https://app.example.com,后端运行在本地 http://127.0.0.1:3000,所有 API 请求以 /api/ 开头:
location /api/ {
proxy_pass http://127.0.0.1:3000/;
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;
}
在无 root/sudo 权限的环境(云容器、VPS、隔离主机)中安装并配置 OpenClaw 浏览器工具的 headless Chrome。适用场景:...
这样,前端调用 fetch('/api/users'),实际被 Nginx 转发为 http://127.0.0.1:3000/users,浏览器全程只和 app.example.com 通信。
常见失败原因和快速排查法
如果配完仍报 502 或请求没动静,优先查这三项:
- 用
curl -v http://127.0.0.1:3000/health直连后端,确认服务真在跑、端口没被占、返回正常 - 看 Nginx 错误日志:
tail -f /var/log/nginx/error.log,重点找Connection refused或Permission denied - 检查 SELinux 和防火墙:
getenforce若为Enforcing,临时关掉测试;ufw status或firewall-cmd --list-all看是否拦截了本地回环
要不要关掉后端的 CORS 中间件?
要。如果后端(如 Express、Spring Boot)自己也返回了 Access-Control-Allow-Origin,Nginx 默认会透传该头,可能和代理逻辑冲突,尤其当后端设的是 * 而前端又带 Cookie 时,直接报错。建议统一由 Nginx 控制跨域行为,后端关闭相关中间件。










