Nginx反向代理是本地开发解决跨域问题的推荐方案：通过location ^~ /api/将/api请求转发至后端（如localhost:8080），其他请求交前端开发服务器或静态文件，配合proxy_set_header和WebSocket支持，实现同源访问、避免CORS。
在本地开发前后端分离项目时，前端（如 Vue、React）通常跑在 http://localhost:3000，后端 API 服务跑在 http://localhost:8080 或其他端口。为避免浏览器跨域问题，可借助 Nginx 的 location 配置做反向代理，把特定路径（如 /api/）转发到后端服务，同时将静态资源（HTML/JS/CSS）直接由 Nginx 提供——这就是本地调试常用的代理方案。
配置基本结构：监听前端端口 + 代理 API 路径
假设你已用 npm run serve 启动前端在 localhost:3000，后端服务运行在 localhost:8080，希望访问 http://localhost:8081/api/users 时实际请求后端 http://localhost:8080/api/users，而其他请求（如 /、/static/）返回前端构建产物或开发服务器资源。
在 Nginx 配置中（如 /usr/local/etc/nginx/nginx.conf 或站点 conf 文件），添加如下 server 块：
server {
listen 8081;
server_name localhost;
<pre class='brush:php;toolbar:false;'># 优先匹配 /api/ 路径，代理到后端
location ^~ /api/ {
proxy_pass http://localhost:8080/;
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;
}
# 其他所有请求交给前端开发服务器（如 vite/vue-cli 的 dev server）
location / {
proxy_pass http://localhost:3000/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}}
关键细节说明
-
匹配顺序很重要：Nginx 按匹配优先级处理
location。使用^~ /api/表示前缀匹配且不进行正则后续检查，比普通location /api/更高效，也避免被location /拦截 -
proxy_pass 末尾斜杠影响路径重写：写成
proxy_pass http://localhost:8080/;（带末尾 /）表示把/api/users中的/api去掉，只转发/users；若写成proxy_pass http://localhost:8080;（无末尾 /），则完整转发/api/users，后端需能处理该路径 -
WebSocket 支持（如热更新）：前端开发服务器常依赖 WebSocket，所以
location /块中必须包含Upgrade和Connection头，否则 HMR 会断连 -
避免 404 或 502：确保后端服务已启动、端口未被占用；检查
proxy_pass地址是否可从 Nginx 所在机器访问（如 Docker 容器内需用宿主机 IP 或host.docker.internal）
替代方案：直接代理静态文件（适合 build 后调试）
如果你用 npm run build 生成了 dist 目录，想让 Nginx 直接托管前端静态文件 + 仅代理 API，则改用 root + index，并保留 /api/ 代理：
server {
listen 8081;
server_name localhost;
<pre class='brush:php;toolbar:false;'>root /path/to/your/frontend/dist;
index index.html;
location ^~ /api/ {
proxy_pass http://localhost:8080/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 解决 SPA 路由刷新 404 问题
location / {
try_files $uri $uri/ /index.html;
}}
这样所有非 /api/ 请求都由 Nginx 返回静态文件，try_files 确保 Vue Router / React Router 的 history 模式正常工作。
验证与调试技巧
- 修改配置后执行
nginx -t检查语法，再nginx -s reload生效 - 用
curl -v http://localhost:8081/api/test查看响应头中的X-Proxy-By或后端返回内容，确认是否真正代理成功 - 打开浏览器开发者工具 → Network 标签，观察请求 URL 是
localhost:8081/api/xxx，但发起的域名仍是当前页域名，说明跨域已规避 - 若遇 502，检查后端是否监听
127.0.0.1:8080（而非localhost或0.0.0.0），以及防火墙或 SELinux 是否拦截
