Vite代理未将请求转发至后端服务器的问题求助

问题场景 #

开发React+Vite前端应用，后端为不同端口的NodeJS服务，已配置Vite代理转发前端请求，但请求/v1/restaurants/7时返回首页HTML，后端无请求记录；直接访问后端或用绝对URL+后端CORS配置可正常请求。

排查与解决方案 #

1. 修正Vite代理配置 #

原代理配置缺少changeOrigin参数，部分后端会校验请求头的Origin字段，导致转发失败。修改后的完整配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'client/dist',
    publicDir: 'public',
    rollupOptions: {
      input: 'client/app.jsx',
    },
  },
  server: {
    port: 5173,
    proxy: {
      '/v1': {
        target: 'http://localhost:8080',
        changeOrigin: true, // 关键：修改请求头Origin为目标服务器地址
      },
    },
  },
});

修改后必须重启Vite服务器，热更新不会重新加载代理配置。

2. 检查前端路由是否拦截请求 #

如果使用React Router的BrowserRouter，确认路由规则中没有匹配/v1/*的前端路由。若存在类似<Route path="/v1/*" element={...} />的配置，会导致Vite代理未触发就被前端路由接管，返回SPA首页HTML。

3. 确认请求路径格式 #

前端发起请求时必须用相对路径，比如：

// 正确写法
fetch('/v1/restaurants/7')

// 错误写法（绝对路径会绕过Vite代理）
fetch('http://localhost:8080/v1/restaurants/7')

4. 排查插件冲突 #

暂时禁用除@vitejs/plugin-react外的其他Vite插件，测试代理是否生效。部分第三方插件可能会修改请求处理优先级，导致代理规则不生效。

5. 验证Vite配置加载 #

确认vite.config.js位于项目根目录，且重启服务器时控制台无配置加载错误。

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