Vite React应用配置多代理连接本地后端实例时出现404错误

根据你的描述，不管把哪个后端服务绑定到/api1代理都会报错，说明问题大概率出在/api1的代理配置、前端请求逻辑，或者Vite的代理匹配机制上，以下是具体的排查和解决步骤：

1. 确认后端服务本身正常 #

先跳过代理，直接用curl测试8082端口的后端服务：

curl -X POST http://127.0.0.1:8082/user/login -H "Content-Type: application/json" -d '{"username":"test","password":"123"}'

如果后端返回正常的JSON，说明服务本身没问题；如果返回404，那是后端路由配置的问题，和代理无关。

2. 检查Vite代理的rewrite规则 #

你的/api1代理的rewrite规则是path.replace(/^\/api1/, "")，看起来没问题，但可以换成更稳妥的字符串截取方式试试，避免正则匹配的潜在问题：

"/api1": {
  target: "http://127.0.0.1:8082",
  changeOrigin: true,
  rewrite: (path) => path.slice(5), // 去掉开头的/api1（共5个字符）
}

另外，确保代理配置的顺序没有问题，Vite会按配置的先后顺序匹配路径，把/api1放在/api前面也可以试试（不过/api和/api1前缀不冲突，影响不大）。

3. 检查前端请求的路径是否正确 #

确认Login.jsx里的请求路径是准确的/api1/user/login，有没有拼写错误（比如多写/少写斜杠、把api1写成api），或者有没有被axios等请求库的baseURL覆盖。比如如果全局设置了axios的baseURL为/api，那请求/api1的时候需要手动指定完整路径：

// 错误写法（会变成/api/api1/user/login）
axios.post('/api1/user/login', data)

// 正确写法
axios.post('/api1/user/login', data, { baseURL: '' })
// 或者直接写完整路径
axios.post('http://localhost:5173/api1/user/login', data)

4. 验证代理是否真的转发了请求 #

在8082端口的Golang服务里添加日志，打印收到的请求路径和来源，比如：

func loginHandler(w http.ResponseWriter, r *http.Request) {
    fmt.Printf("Received request: %s from %s\n", r.URL.Path, r.RemoteAddr)
    // 原有逻辑
}

如果启动前端后发起请求，后端没有打印日志，说明Vite的代理根本没把请求转发过去；如果有日志但路径不对，说明rewrite规则没生效。

5. 调整Vite代理的额外配置 #

试试添加secure: false和followRedirects: true参数，避免本地http服务的安全限制：

"/api1": {
  target: "http://127.0.0.1:8082",
  changeOrigin: true,
  rewrite: (path) => path.slice(5),
  secure: false,
  followRedirects: true
}

另外，确保Vite是最新稳定版本，旧版本可能存在代理匹配的bug，执行npm update vite升级后再测试。

内容的提问来源于stack exchange，提问作者Sainath talluri