Nginx反向代理是最常用、最安全、最可控的跨域解决方案，通过将前端请求转发至后端并隐藏真实地址，使浏览器认为全程同源；配置需注意proxy_pass末尾斜杠、WebSocket升级支持及Cookie透传等细节。
通过在 Nginx 层配置反向代理，把前端请求“伪装”成同源请求，是最常用、最安全、也最可控的跨域解决方案。
为什么推荐用 Nginx 代理而不是 CORS 头？
后端接口若不归你控制（如第三方 API、遗留系统），无法添加 Access-Control-Allow-Origin 等响应头；而开发环境本地启服务时，浏览器又严格校验跨域。Nginx 代理能彻底绕过浏览器的同源检查——前端只访问自己的域名（如 https://app.example.com），Nginx 在服务端把请求转发到真实后端（如 http://api.internal:8080），再把响应原样返回，对浏览器来说全程“没跨域”。
基础反向代理配置示例
假设前端部署在 /var/www/frontend，访问地址是 https://app.example.com，需调用后端 http://192.168.1.100:3000/api：
server {
listen 443 ssl;
server_name app.example.com;
<pre class="brush:php;toolbar:false;">root /var/www/frontend;
index index.html;
# 前端静态资源直接返回
location / {
try_files $uri $uri/ /index.html;
}
# 将 /api/ 开头的请求代理到后端
location /api/ {
proxy_pass http://192.168.1.100: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;
}
}
注意：proxy_pass 末尾的 / 很关键——它会自动剥离 /api/ 前缀再转发。比如前端请求 /api/users，实际发给后端的是 http://192.168.1.100:3000/users。
常见问题与补充配置
-
代理 WebSocket 连接：如果接口含 WebSocket（如
/ws/），需额外开启升级支持：location /ws/ { proxy_pass http://backend; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } -
处理带 Cookie 的请求：前端需设置
withCredentials: true，Nginx 要透传 Cookie 并允许凭据：proxy_pass http://backend; proxy_cookie_path / "/; SameSite=None; Secure"; # 同时后端响应需带 Access-Control-Allow-Credentials: true - 开发环境快速启用：Vue CLI、Create React App 都支持本地 devServer 代理，但仅限开发。上线必须用 Nginx，否则部署后立即跨域失败。
验证是否生效
打开浏览器开发者工具 → Network 标签页，查看 Ajax 请求的 Protocol 是否为 h2 或 http/1.1，Domain 是否和页面一致（都是 app.example.com）；点击该请求 → Headers → 查看 Request URL 是 https://app.example.com/api/xxx，而非直接指向后端地址。只要满足这两点，就说明代理已生效，跨域问题已解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
