如何配置Vite代理使其与Create React App代理行为一致？

要实现和Create React App（CRA）中proxy字段完全一致的效果——无需指定路径前缀，所有业务Fetch请求都自动转发到目标服务器，你可以通过Vite的server.proxy结合正则匹配来实现，核心是用负向预查正则排除本地需要直接处理的请求，只代理业务接口请求。

具体配置示例 #

在项目根目录的vite.config.js（或vite.config.ts）中添加如下配置：

import { defineConfig } from 'vite'
// 根据你的项目框架选择对应插件，比如React/Vue
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 匹配所有根路径请求，同时排除Vite内部路径、本地静态资源
      '^/(?!@vite|favicon.ico|assets)': {
        target: 'https://some.server.com', // 替换为你的目标服务器地址
        changeOrigin: true, // 必须开启，模拟目标服务器域名，避免跨域拦截
        secure: false, // 若目标服务器是自签HTTPS证书，需开启此选项跳过SSL验证
        rewrite: (path) => path // 保持原请求路径不变，和CRA代理逻辑一致
      }
    }
  }
})

配置细节说明 #

• 正则匹配规则：^/(?!@vite|favicon.ico|assets)是负向预查语法，意思是匹配所有以/开头的请求，但排除以下本地请求：
  • @vite：Vite开发服务的内部请求（比如热更新、模块加载）
  • favicon.ico：本地图标文件
  • assets：Vite默认的静态资源打包目录（如果你的静态资源目录是static等其他名称，替换成对应名称即可）
• changeOrigin：开启后，代理请求会带上目标服务器的域名标识，这是解决跨域问题的关键，和CRA的代理逻辑完全对齐。
• rewrite：保持请求路径原样转发，确保目标服务器收到的路径和前端发起的请求路径一致。

额外注意点 #

• 如果本地有其他需要保留的自定义路径（比如自己的静态资源目录），直接把路径添加到正则的排除列表中即可，例如^/(?!@vite|favicon.ico|assets|static)。
• 若本地存在和请求路径同名的文件/目录，Vite会优先返回本地资源而非代理请求，这和CRA的行为一致，测试时需要留意这一点。

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