Vue3中Vite本地localhost代理配置失效问题求助

问题定位 #

直接调用API完整地址可正常请求，但用/go代理路径时返回404，核心原因是代理配置缺少路径重写规则，且跨域相关配置未适配后端服务，导致请求未正确转发。

修复方案 #

修改vite.config.ts中的代理配置，调整两点关键设置：

• 开启changeOrigin：适配后端的Origin校验逻辑
• 添加rewrite规则：移除请求路径中的/go前缀，保证后端收到正确的接口路径

修改后的完整配置代码：

export default defineConfig({
 server: {
        port: 3000,
        proxy: {
            '/go': {
                target: 'http://localhost:3001',
                changeOrigin: true, // 修改为true，让代理请求的Origin匹配后端地址
                secure: false,
                rewrite: (path) => path.replace(/^\/go/, ''), // 剥离路径中的/go前缀
                configure: (proxy, _options) => { 
                    proxy.on('error', (err, _req, _res) => {
                        console.log('proxy error', err);
                    });
                    proxy.on('proxyReq', (proxyReq, _req, _res) => {
                        console.log('proxy request to target', _req.method, _req.url);
                    })
                }
            }
        }
 },
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

验证方式 #

修改配置后重启Vite开发服务，发起请求时观察控制台：

• 若打印proxy request to target日志，说明代理已触发，此时后端收到的路径为/api/AuthenticationCookie/Login，与直接调用的路径一致
• 若仍无日志输出，检查请求路径是否严格以/go开头，确认没有拼写错误

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