用 proxy_pass 实现伪静态与后端路由同步的关键是透传原始 URI：带尾部斜杠的 proxy_pass（如 /）可替换 location 匹配部分，实现路径剥离；需配合 try_files、正确头信息传递及 ^~ 提升匹配优先级，确保前端路由由后端统一处理。

用 proxy_pass 实现伪静态与后端路由同步，核心不是让 Nginx 做路由判断，而是把前端“看起来像静态路径”的请求，原样、准确地透传给后端服务，由后端统一处理路由逻辑。关键在路径拼接和重写控制，避免 Nginx 意外截断或改写 URI。

确保 proxy_pass 不自动重写 URI

Nginx 的 proxy_pass 行为取决于写法：带 URI 后缀（如 proxy_pass http://backend/;）会替换 location 匹配部分；不带则原样转发。要同步前端伪静态路径，通常需保留原始 URI 结构。

• ✅ 正确（透传完整路径）：
  

  location /app/ {<br>  proxy_pass http://127.0.0.1:3000/;

  
  访问 /app/user/profile → 后端收到 /user/profile
• ❌ 错误（意外截断）：
  

  location /app/ {<br>  proxy_pass http://127.0.0.1:3000;

  
  访问 /app/user/profile → 后端收到 /app/user/profile（多出 /app 前缀，易导致 404）

处理根路径与 history 模式（如 Vue Router）

单页应用常启用 HTML5 History 模式，前端路由无 #，依赖服务端兜底——所有非静态资源请求都应返回 index.html，再由前端 JS 解析路径。Nginx 需配合后端做两层判断：

• 先尝试匹配真实静态文件（js/css/img 等），命中则直接返回
• 未命中时，将请求代理给后端（如 Node.js 或 Go 服务），由其决定是否渲染页面或返回 404
• 示例配置片段：
  

  location / {<br>  try_files $uri $uri/ @backend;<br>}<br>location @backend {<br>  proxy_pass http://127.0.0.1:3000;<br>}

传递原始 Host 和协议信息

后端若需生成绝对 URL（如邮件链接、API 响应中的回调地址），必须知道用户实际访问的域名和协议（HTTP/HTTPS）。Nginx 默认不转发这些头，需手动设置：

• proxy_set_header Host $host; —— 保持原始 Host
• proxy_set_header X-Real-IP $remote_addr; —— 传递真实客户端 IP
• proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
• proxy_set_header X-Forwarded-Proto $scheme; —— 让后端知道是 http 还是 https

避免 location 匹配干扰伪静态路径

多个 location 块可能因优先级覆盖预期行为。例如：

• 有 location ~ \.js$ { ... } 和 location /app/ { ... }，而请求是 /app/main.js，正则 location 会优先生效，导致 JS 文件被静态返回，而非走代理
• 解决方法：用 ^~ 前缀提升前缀匹配优先级，或调整顺序，确保伪静态路径的 location 覆盖更广
• 推荐写法：
  

  location ^~ /app/ {<br>  proxy_pass http://127.0.0.1:3000/;<br>  proxy_set_header Host $host;<br>}