服务器从Heroku切换到Vercel后API请求404及JSON解析失败求助

问题根源 #

Vercel的Serverless架构和Heroku的容器部署逻辑完全不同：Heroku直接运行完整的Express服务器，自定义路由可直接生效；但Vercel默认仅识别api目录下的文件作为API接口，原Express代码未按Vercel规则配置，导致访问/book时返回的是Vercel的404 HTML页面，前端尝试解析JSON自然报错。

具体解决步骤 #

1. 调整项目目录结构
   在项目根目录新建api文件夹，把API逻辑文件放在该目录下，比如创建api/book.js（对应访问路由/api/book）。

2. 重构后端代码适配Vercel Serverless函数
   替换原Express路由代码为Vercel要求的函数格式，示例如下：

   import { MongoClient } from 'mongodb';
   
   export default async function handler(req, res) {
     // 只处理GET请求
     if (req.method !== 'GET') {
       return res.status(405).json({ message: '仅支持GET请求' });
     }
   
     try {
       // 连接MongoDB（需提前配置环境变量）
       const client = await MongoClient.connect(process.env.MONGODB_URI);
       const db = client.db('你的数据库名称');
       const bookCollections = db.collection('books');
   
       // 查询所有书籍数据
       const result = await bookCollections.find({}).toArray();
       res.status(200).json(result);
   
       client.close();
     } catch (error) {
       res.status(500).json({ message: '数据库查询失败', error: error.message });
     }
   }
   

3. 修正前端请求地址
   把前端fetch的URL从https:xyz.vercel.app/book改成https://xyz.vercel.app/api/book，匹配Vercel的API路由前缀规则。

4. 配置Vercel环境变量
   进入Vercel项目的「Settings」→「Environment Variables」，添加MongoDB连接字符串（比如MONGODB_URI），确保和Heroku上的配置完全一致。

5. 重新部署验证
   提交代码重新部署Vercel项目，用Postman或浏览器访问https://xyz.vercel.app/api/book，确认返回JSON格式数据且状态码为200。

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