从CRA迁移至Vite：如何实现类似CRA的全局请求代理？

开发者阿泽

2026-7-3

实现Vite全局代理（模拟CRA的proxy行为）

要在Vite中实现类似Create React App（CRA）的全局代理效果，无需修改现有代码中的请求前缀，可通过正则匹配+路径排除的方式配置：

export default defineConfig(() => {
  return {
    build: {
      outDir: 'build',
    },
    server: {
      proxy: {
        // 匹配所有非Vite本地资源的请求
        '^/(?!@vite|src|favicon.ico|public)': {
          target: 'http://localhost:5001',
          changeOrigin: true,
          // 保留原请求路径转发至后端
          rewrite: (path) => path,
        },
      },
    },
    plugins: [react()],
  };
});

配置说明：

正则匹配规则：^/(?!@vite|src|favicon.ico|public) 是负向预查正则，匹配所有以/开头，但不包含@vite（Vite内部服务路径）、src（本地源码请求）、favicon.ico（本地图标）、public（静态资源目录）的请求，避免把Vite自身的开发资源转发到后端。
changeOrigin：设置为true可修改请求头中的Host字段为后端服务地址，解决跨域验证问题。
rewrite函数：直接返回原路径，确保/todo、/api/trains等不同前缀的请求能原封不动转发到后端。