Vite项目部署Vercel/Netlify时代理环境变量失效求助

本地通过npm run dev运行Vite项目时，使用代理访问后端API正常，但部署到Vercel或Netlify生产环境后，axios请求/api/users报错。前端代码中console.log(import.meta.env.VITE_URL)能正常打印后端端点，说明环境变量已正确加载，但代理规则未生效。

vite.config.js 代码：

export default ({ mode }) => {
   // Load environment variables based on the mode/
   const env = loadEnv(mode, process.cwd(), '');

   return defineConfig({
     server: {
       proxy: {
         '/api': {
           target: env.VITE_URL,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, '')
         }
       }
     },
     plugins: [react()]
   })
 };

App.jsx 代码：

import axios from 'axios'

function App() {

  const fetchdata = async() => {
    try {
      console.log(import.meta.env.VITE_URL);           // working well on deployment;
      
      const res = await axios.get("/api/users");       // throwing error on deployment
      console.log(res)

    } catch (error) {
      console.log(error)
    }
  }
  fetchdata();

  return (
    <>
       <h1>Hello world</h1>
    </>
  )
}

export default App

核心原因 #

Vite的server.proxy配置仅在开发环境（npm run dev）生效，生产部署后项目是静态资源，没有Vite开发服务器处理代理转发，因此/api路径无法被转发到后端地址。

解决办法 #

方法1：前端直接请求完整后端地址

修改axios请求，去掉/api前缀，直接用环境变量中的后端地址拼接接口路径：

const res = await axios.get(`${import.meta.env.VITE_URL}/users`);

注意：需要确保后端服务配置了CORS跨域允许，允许部署平台的域名访问。

方法2：在部署平台配置重写/代理规则（推荐）

让Vercel或Netlify处理/api路径的转发，保持前端代码不变：

Vercel 配置

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

{
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "${VITE_URL}/$1"
    }
  ]
}

然后在Vercel控制台的项目环境变量中配置VITE_URL，值为你的后端服务端点。

Netlify 配置

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

[[redirects]]
  from = "/api/*"
  to = "${VITE_URL}/:splat"
  status = 200
  force = true

同样在Netlify控制台的项目环境变量中配置VITE_URL。

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