Vercel生产环境下MERN应用POST/GET请求返回405错误

问题复盘 #

本地MERN栈开发正常，但部署到Vercel后出现以下异常：

• 访问https://watchortype.vercel.app/api/participants时，GET请求返回React的noscript页面而非预期的JSON数据
• POST请求返回405错误，无法向MongoDB创建条目

核心原因 #

Vercel默认优先返回前端静态资源，原有Express后端的路由结构未适配Vercel的Serverless Functions规则，导致API请求被前端路由拦截；同时可能存在CORS配置缺失、环境变量未同步、请求体解析中间件遗漏等问题。

解决步骤 #

1. 重构后端为Vercel Serverless Functions格式 #

Vercel要求后端API代码放在项目根目录的/api文件夹下，每个API对应单独文件（或通过路由整合）。

示例/api/participants.js写法：

const express = require('express');
const serverless = require('serverless-http');
const cors = require('cors');
const {
  createParticipant,
  getParticipants,
  getParticipant,
  updateParticipant,
} = require('../controllers/participantController');

const app = express();
const router = express.Router();

// 配置核心中间件
app.use(cors({ origin: process.env.CLIENT_URL || 'https://watchortype.vercel.app' }));
app.use(express.json()); // 必须添加，用于解析POST请求的JSON体

// 挂载路由规则
router.get('/', getParticipants);
router.get('/:id', getParticipant);
router.post('/', createParticipant);
router.patch('/:id', updateParticipant);

app.use('/api/participants', router);

// 导出Vercel兼容的Serverless处理函数
module.exports.handler = serverless(app);

需安装依赖：

npm install serverless-http cors

2. 同步Vercel环境变量 #

• 进入Vercel项目的「Settings」→「Environment Variables」
• 添加MongoDB连接字符串（如MONGODB_URI），值与本地.env文件完全一致
• 添加CLIENT_URL变量，值为你的生产域名（如https://watchortype.vercel.app）
• 保存后触发重新部署，确保环境变量生效

3. 设置Vercel路由重写规则 #

在项目根目录创建vercel.json，确保API请求优先被后端处理：

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

该配置会让所有/api开头的请求直接转发到对应Serverless函数，其他请求返回前端页面，避免API路由被前端拦截。

4. 验证后端控制器与MongoDB连接 #

• 检查participantController.js中的createParticipant函数，确保正确处理POST请求参数：

  // 示例createParticipant逻辑
  const createParticipant = async (req, res) => {
    try {
      const participant = await Participant.create(req.body);
      res.status(201).json(participant);
    } catch (error) {
      res.status(400).json({ error: error.message });
    }
  };
  

• 确保mongoose连接代码在生产环境中正确处理异步逻辑：

  const mongoose = require('mongoose');
  
  const connectDB = async () => {
    try {
      await mongoose.connect(process.env.MONGODB_URI);
      console.log('MongoDB连接成功');
    } catch (error) {
      console.error('MongoDB连接失败:', error);
      process.exit(1);
    }
  };
  
  connectDB();
  

5. 测试生产环境请求 #

部署完成后，直接验证API：

• 用POSTMAN或浏览器控制台发送GET请求https://watchortype.vercel.app/api/participants，应返回JSON格式的数据列表
• 发送携带正确JSON参数的POST请求，应返回创建成功的条目

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