Vue + Nginx 前端代理配置各种场景详细细节

一、简介

• 以 https://dzm.admin.com/api/login 接口为例，分别对以下几种代理形式做出对比：

  • https://dzm.admin.com：无结尾斜杠

  • https://dzm.admin.com/：带结尾斜杠

  • https://dzm.admin.com/api：带路径无结尾斜杠 - 错误示范

  • https://dzm.admin.com/api/：带路径和结尾斜杠

---

二、proxy_pass https://dzm.admin.com（无结尾斜杠）

• Nginx 配置

  location /api/ {
      proxy_pass https://dzm.admin.com;
  }
  

  • 转发规则

    • 请求 /api/login → 转发到 https://dzm.admin.com/api/login

    • 请求 /api/user/info → 转发到 https://dzm.admin.com/api/user/info

  • 特点

    • 保留 location 匹配的 /api/ 前缀

    • 适用于后端接口路径和前端请求路径一致的情况

• Vue 对应配置

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://dzm.admin.com', // 无斜杠
          changeOrigin: true,
          // 无需 pathRewrite
          // 请求 /api/login → https://dzm.admin.com/api/login
        }
      }
    }
  }
  

---

三、proxy_pass https://dzm.admin.com/（带根斜杠 /）

• Nginx 配置

  location /api/ {
      proxy_pass https://dzm.admin.com/;
  }
  

  • 转发规则

    • 请求 /api/login → 转发到 https://dzm.admin.com/login

    • 请求 /api/user/info → 转发到 https://dzm.admin.com/user/info

  • 特点

    • 移除 location 匹配的 /api/ 前缀

    • 适用于后端接口没有 /api 前缀的情况

• Vue 对应配置（vue.config.js）

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://dzm.admin.com/', // 带根斜杠
          changeOrigin: true,
          pathRewrite: { '^/api': '' }, // 去除 /api 前缀
          // 请求 /api/login → https://dzm.admin.com/login
        }
      }
    }
  }
  

---

四、proxy_pass https://dzm.admin.com/api（带路径但无斜杠 - ❌ 错误示范）

• Nginx 配置

  location /proxy/ {
      proxy_pass https://dzm.admin.com/api;
  }
  

  • 转发规则

    • 请求 /proxy/login → 转发到 https://dzm.admin.com/apilogin ❌（错误拼接）

    • 请求 /proxy/user/info → 转发到 https://dzm.admin.com/apiuser/info ❌（错误拼接）

  • 问题

    • ❌ 路径直接拼接，导致 api 和 login 连在一起（缺少 /）

    • ❌ 几乎永远不应该这样使用！

• Vue 对应情况（错误示范）

  // ❌ 错误写法（Vue 不会这样写，但 Nginx 可能会误配）
  proxy: {
    '/proxy': {
      target: 'https://dzm.admin.com/api', // 无斜杠
      changeOrigin: true,
      // 请求 /proxy/login → https://dzm.admin.com/apilogin（错误！）
    }
  }
  

---

五、proxy_pass https://dzm.admin.com/api/（带路径和斜杠 /）

• Nginx 配置

  location /any-prefix/ {
      proxy_pass https://dzm.admin.com/api/;
  }
  

  • 转发规则

    • 请求 /any-prefix/login → 转发到 https://dzm.admin.com/api/login

    • 请求 /any-prefix/user/info → 转发到 https://dzm.admin.com/api/user/info

  • 特点

    • 固定添加 /api/ 前缀，不受 location 影响

    • 适用于前端路径和后端路径不一致的情况

• Vue 对应配置（vue.config.js）

  module.exports = {
    devServer: {
      proxy: {
        '/any-prefix': {
          target: 'https://dzm.admin.com/api/', // 带目标路径斜杠
          changeOrigin: true,
          pathRewrite: { '^/any-prefix': '' }, // 替换为 /api
          // 请求 /any-prefix/login → https://dzm.admin.com/api/login
        }
      }
    }
  }
  

---

📌 总结（关键区别）

proxy_pass 写法	Nginx 示例	Vue 对应写法	请求 /xxx/login 的最终路径
https://dzm.admin.com（无斜杠）	保留 /api/	target: '...'（无斜杠）	https://dzm.admin.com/api/login
https://dzm.admin.com/ （根斜杠）	去除 /api/	target: '.../' + pathRewrite	https://dzm.admin.com/login
https://dzm.admin.com/api（无斜杠 - ❌错误）	错误拼接	❌ 不要这样写	https://dzm.admin.com/apilogin（错误！）
https://dzm.admin.com/api/ （带斜杠）	强制 /api/	target: '.../api/' + pathRewrite	https://dzm.admin.com/api/login

---

📢 最佳实践建议

1. 如果前后端路径一致 → 用 proxy_pass https://dzm.admin.com（无斜杠）
2. 如果要去掉 /api 前缀 → 用 proxy_pass https://dzm.admin.com/（根斜杠）
3. 如果要强制加 /api 前缀 → 用 proxy_pass https://dzm.admin.com/api/（带斜杠）
4. ❌ 永远不要用 https://dzm.admin.com/api（无斜杠） ，会导致路径错误拼接！

这样配置后，无论是 Nginx 生产环境 还是 Vue 开发环境，代理行为都会保持一致，避免跨环境路径问题！ 🚀