Vite React开发代理失效，部署Vercel/Netlify后API请求异常

问题根源 #

• Vite的server.proxy仅作用于本地开发服务器，生产构建后生成的是静态资源，不会启动Vite服务器，因此该配置在部署后完全失效。
• 你配置的build.proxy是无效项，Vite的build配置里不存在proxy参数，线上环境不会读取这部分配置。

解决方案 #

方案1：用环境变量配置API地址（推荐） #

通过环境变量区分本地和线上的API基础地址，前端请求时直接拼接完整路径：

1. 在项目根目录创建两个环境配置文件：
   • .env.development（本地开发用）：

     VITE_API_BASE_URL=http://localhost:8000
     

   • .env.production（线上部署用）：

     VITE_API_BASE_URL=https://sample__.onrender.com
     

2. 前端请求时调用环境变量：

   // 示例：登录请求
   fetch(`${import.meta.env.VITE_API_BASE_URL}/auth/login/`, {
     // 请求配置
   })
   

3. 若用此方案，可保留server.proxy适配本地开发，也可直接用环境变量统一本地和线上的请求写法。

方案2：在平台配置重写规则 #

如果不想修改前端代码，可在Vercel/Netlify上配置路径重写，模拟代理效果：

Vercel配置

在项目根目录创建vercel.json：

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "https://sample__.onrender.com/$1"
    }
  ]
}

Netlify配置

在项目根目录创建netlify.toml：

[[redirects]]
  from = "/api/*"
  to = "https://sample__.onrender.com/:splat"
  status = 200
  force = true

清理无效配置 #

删除Vite配置里的build.proxy部分，该配置完全无效，只会造成混淆：

// 修改后的vite.config.js
export default defineConfig({
  plugins: [
    VitePWA(manifestForPlugin),
    react(),
  ],
  server: {
    proxy: {
      "/api": {
        target: "https://sample__.onrender.com",
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace("/api", ""),
      },
    },
  },
});

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