Vue前端部署在Vercel无法调用Render后端API问题排查

我用Vue.js开发了一个功能完整的在线学习平台，后端是Node.js/Express搭建的RESTful API。前端部署在Vercel，后端托管在Render。本地运行时平台功能正常，本地前端调用Render上的后端接口也没问题，但部署后的前端访问时出现CORS错误。

登录功能的代码示例：

export const login = async (data: data) => {
  const logUser = axios({
    method: "post",
    url: "/api/v1/auth/login",
    data,
    params: {
      role: data.role,
    },
  });
  return logUser;
};

开发阶段用axios baseUrl直接请求会出现CORS错误，所以我在vue.config.ts里加了devServer代理指向后端API地址：

module.exports = defineConfig({
  devServer: {
    proxy: "https://my-api-backend.onrender.com",
  }
})

原本希望浏览器把请求代理到后端API，但生产环境执行登录等POST操作时出现405 Method Not Allowed错误，请求好像被代理到前端托管地址而非后端。

另外说明：后端已经配置允许所有来源的请求：

const app = express()
const cors = require('cors')

app(cors('*'))

请问我遗漏了什么配置？

1. 开发环境代理不生效于生产环境 #

vue.config.ts里的devServer.proxy仅在本地开发时有效，部署到Vercel后这个配置完全失效。生产环境下前端请求会默认发向当前域名（Vercel的前端域名），自然找不到对应的后端接口，导致405错误。

解决方式：给axios配置区分环境的baseURL，生产环境直接指向Render后端地址：

// 新建axios实例时区分环境
const axiosInstance = axios.create({
  baseURL: process.env.NODE_ENV === 'production' 
    ? 'https://my-api-backend.onrender.com' 
    : '/' // 本地开发用代理，所以用相对路径
})

// 登录函数改用这个实例
export const login = async (data: data) => {
  return axiosInstance({
    method: "post",
    url: "/api/v1/auth/login",
    data,
    params: {
      role: data.role,
    },
  });
};

2. 后端CORS配置写法错误 #

你写的app(cors('*'))是错误用法，正确的CORS中间件启用方式是app.use(cors())或app.use(cors({ origin: '*' }))。当前写法没有正确挂载CORS中间件，这是导致CORS错误的核心原因。

修正后端代码：

const app = express()
const cors = require('cors')

// 正确启用CORS，允许所有来源（生产环境建议指定具体前端域名更安全）
app.use(cors())
// 安全写法示例：
// app.use(cors({ origin: 'https://your-vercel-frontend.vercel.app' }))

3. 可选：Vercel端配置代理隐藏后端地址 #

如果不想在前端代码暴露后端地址，可以在Vercel项目中配置重写规则实现代理：

• 进入Vercel项目的Settings → Framework Presets → 找到Rewrites配置
• 添加规则：

  {
    "source": "/api/:path*",
    "destination": "https://my-api-backend.onrender.com/api/:path*"
  }
  

配置后生产环境下前端请求/api/xxx会被Vercel自动代理到后端，和本地devServer效果一致，无需修改axios的baseURL。

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