核心是用 proxy_pass 实现静态资源直服与 API 反向代理：location / 服务前端文件并回退 index.html，location /api/ 代理请求，proxy_pass 后带 / 可剥离前缀；需透传 Host、X-Real-IP 等头，避免跨域和路径错乱。
在 Nginx 中用 proxy_pass 实现前后端分离转发，核心是让前端静态资源（如 HTML、JS、CSS）由 Nginx 直接服务，而 API 请求（如 /api/ 开头的路径）被反向代理到后端服务（如 Node.js、Java、Python 应用）。关键在于路径匹配精准、请求头透传正确、避免跨域问题。
基础配置：区分静态资源与 API 转发
假设前端打包产物放在 /var/www/dist，后端服务运行在 http://127.0.0.1:3000，API 接口统一以 /api/ 开头：
示例配置片段：
server {
listen 80;
server_name example.com;
<pre class="brush:php;toolbar:false;"># 前端静态文件（优先匹配）
location / {
root /var/www/dist;
try_files $uri $uri/ /index.html;
}
# 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;
}}
注意：proxy_pass 后面的 / 很关键——它会把 /api/xxx 中的 /api/ 前缀剥离，只将 /xxx 发送给后端。若写成 http://127.0.0.1:3000（无尾部斜杠），Nginx 会原样转发完整路径，导致后端收到 /api/xxx，可能 404。
处理前端路由（History 模式）
Vue Router 或 React Router 使用 History 模式时，刷新页面会 404，因为 Nginx 找不到对应静态文件。需用 try_files 回退到 /index.html，由前端路由接管：
-
try_files $uri $uri/ /index.html;必须放在location /块中 - 不要把它放到
location /api/里，否则会影响 API 转发逻辑 - 确保
/index.html在root指定的目录下存在
避免代理导致的跨域或路径错乱
常见问题和应对方式：
-
后端收不到真实客户端 IP：必须设置
proxy_set_header X-Real-IP $remote_addr;和X-Forwarded-For，否则日志或限流可能失效 -
后端重定向跳转出错（如 302 到
http://127.0.0.1:3000/login）：添加proxy_redirect off;或明确重写跳转地址，例如proxy_redirect http://127.0.0.1:3000/ /; -
前端发请求带了
Origin头但后端未透传：Nginx 默认不修改请求头，只要后端正确处理 CORS 即可；若后端依赖原始 Origin，无需额外操作
可选增强：WebSocket 支持与超时调优
如果后端提供 WebSocket 接口（如 /ws/），需显式启用升级协议：
location /ws/ {
proxy_pass http://127.0.0.1:3000/ws/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
另外，长连接或大文件上传建议调优超时参数：
proxy_connect_timeout 30s;proxy_send_timeout 300s;proxy_read_timeout 300s;-
client_max_body_size 50m;（如需上传大文件）
