Vercel部署MERN应用后API请求返回404问题求助

1. 核对Vercel路由配置（vercel.json） #

Vercel对后端API的部署有特定规则，重点检查：

• 确保rewrites规则正确将API请求转发到后端入口，比如：

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

• 若后端代码不在默认的api目录（比如放在backend文件夹），需调整destination路径，或在vercel.json中添加functions配置指定后端文件的运行时：

  {
    "functions": {
      "backend/index.js": { "runtime": "@vercel/node@20" }
    },
    "rewrites": [
      { "source": "/api/(.*)", "destination": "/backend/index.js" }
    ]
  }
  

2. 验证后端index.js的关键配置 #

• 移除硬编码的本地端口，改用Vercel自动分配的端口：

  const PORT = process.env.PORT || 5000;
  app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
  

• 确认API路由前缀与前端请求一致：如果前端请求/api/users，后端需对应配置app.get('/api/users', ...)；若rewrites已处理前缀，后端路由则应为/users。
• 检查CORS配置，允许前端域名访问（避免通配符带来的潜在问题）：

  const cors = require('cors');
  app.use(cors({ origin: process.env.FRONTEND_URL || 'https://your-vercel-app.vercel.app' }));
  

3. 检查项目结构与Vercel部署设置 #

• 若为前后端分离的monorepo结构，需在Vercel控制台的部署设置中指定：
  • 前端构建命令：npm run build（针对Create React App）
  • 后端构建命令：cd backend && npm install（若需编译则追加编译指令）
• 确保后端依赖已正确安装，Vercel会自动执行npm install，但如果是子目录结构，需确认部署时能识别到后端的package.json。

4. 查看Vercel部署日志与前端网络请求 #

• 登录Vercel控制台，进入对应项目的Functions标签，查看后端Serverless Function是否有启动错误或加载失败的日志。
• 在浏览器F12的Network面板中，检查前端API请求的URL是否正确，请求头、状态码是否符合预期。

5. 直接测试API端点 #

部署完成后，直接访问API地址（比如https://your-vercel-app.vercel.app/api/test），若仍返回404，说明后端路由或部署配置存在问题；若能正常返回结果，则需排查前端请求的URL拼接逻辑。

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