部署在Vercel的Vite+React调用Render后端API时代理失效

核心问题 #

你当前的配置存在两个关键错误：

1. Vite server.proxy仅作用于本地开发环境：生产环境部署到Vercel后，该配置完全失效，Vercel不会识别Vite的开发服务器代理规则。
2. 开发环境代理路径重写错误：你的rewrite规则把请求路径中的/api前缀移除，导致转发到后端的路径变成https://myapp-backend.onrender.com/data，但后端实际路由是/api/data，路径不匹配引发405 Method Not Allowed。

解决方案 #

1. 修复本地开发环境的Vite代理配置

修改vite.config.js，移除错误的rewrite规则（因为后端路由本身包含/api前缀，不需要移除）：

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'https://myapp-backend.onrender.com',
        changeOrigin: true,
        secure: false
        // 移除rewrite规则，保留/api前缀匹配后端路由
      }
    }
  }
});

修改后，本地开发时/api/data会被正确转发到https://myapp-backend.onrender.com/api/data。

2. 配置Vercel生产环境的路由重写

在项目根目录创建vercel.json文件，添加Vercel专属的重写规则，实现生产环境的请求转发：

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

该规则会将所有以/api/开头的生产环境请求，转发到后端对应路径（比如/api/data → https://myapp-backend.onrender.com/api/data）。

3. 可选优化：统一Axios基础路径

为了避免重复编写/api前缀，可全局配置Axios的基础路径：

import axios from 'axios';

const api = axios.create({
  baseURL: '/api'
});

api.post('/data', { key: 'value' })
  .then(response => console.log(response))
  .catch(error => console.error(error));

常见失效原因总结 #

• 混淆开发/生产环境配置：Vite的server.proxy仅服务于本地开发服务器，生产环境必须使用部署平台（如Vercel）的路由规则。
• 路径重写规则错误：如果后端路由包含代理前缀，错误移除前缀会导致请求路径与后端路由不匹配。
• 未配置生产环境转发：生产环境直接请求后端会触发CORS，必须通过部署平台的重写规则实现同源转发，或确保后端CORS配置覆盖生产环境域名。

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