Vite代理配置未正确重写Axios实例请求URL的问题求助

问题背景 #

前端服务运行在127.0.0.1:8080，后端服务运行在127.0.0.1:8081，计划通过Vite代理解决跨域问题，但配置后请求未按预期转发。

当前配置代码 #

vite.config.ts #

// vite.config.ts
export default defineConfig({
    ...
    server: {
    port: 8080,
    cors: true,
    proxy: {
      '^/api': {
        target: 'http://localhost:8081/',
        changeOrigin: true,
        rewrite: (path) => { return path.replace(/^\/api/, '') }
      }
    }
  }
});

server.ts（Axios实例） #

//server.ts
const server = axios.create({
    baseURL: '/api',
    timeout: 5000,
});

...

export default server;

异常现象 #

调用server.get('/user/login')时，期望请求转发至127.0.0.1:8081/user/login，但实际请求地址为127.0.0.1:8080/api/user/login。

控制台打印的rewrite函数执行结果：

console.log(path): /api/user/login
console.log(path.replace(/^\/api/, '')): /user/login

排查与解决步骤 #

1. 重启Vite开发服务器
   修改vite.config.ts后必须重启服务器，配置才会生效，这是代理不工作最常见的原因。

2. 调整代理匹配规则
   将正则匹配的'^/api'改为字符串前缀'/api'，简化匹配逻辑，同时保持rewrite规则不变：

   proxy: {
     '/api': {
       target: 'http://localhost:8081/',
       changeOrigin: true,
       rewrite: (path) => path.replace(/^\/api/, '')
     }
   }
   

3. 验证后端服务状态
   确认127.0.0.1:8081的后端服务已正常启动，且/user/login接口可正常访问。

4. 检查浏览器网络请求
   打开浏览器开发者工具的Network面板，查看请求的Host头是否为localhost:8081（changeOrigin: true会自动修改该头），以此确认代理规则是否触发。

完成以上操作后，代理应能正常将127.0.0.1:8080/api/user/login转发至127.0.0.1:8081/user/login。

内容的提问来源于stack exchange，提问作者yuan liu