在Vercel现有React项目中配置Express API失败求助

核心问题原因 #

Vercel上的API请求被React的路由规则捕获，导致返回React的HTML文件；本地环境正常是因为开发服务器与API服务的路由隔离逻辑和Vercel的部署规则不同。

具体修复步骤 #

• 规范API文件的命名与结构
  Vercel对API文件有固定规则：/hello接口需要在项目根目录的api文件夹下创建hello.js（或hello.ts），文件内必须导出默认的Express处理逻辑，示例代码：

  import express from 'express';
  const router = express.Router();
  
  router.get('/', (req, res) => {
    res.json({ message: 'Hello from API' });
  });
  
  export default router;
  

  注意：Vercel会自动将api/hello.js映射为/api/hello路径，无需手动在代码中添加额外前缀。

• 修正vercel.json路由配置
  在项目根目录放置vercel.json，配置路由重写规则，让/api开头的请求优先匹配API服务，避免被React接管：

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

• 调整环境变量与请求路径
  在Vercel控制台的环境变量中，将REACT_APP_API_URL设置为/api（生产环境下API路径为域名+/api），前端请求代码无需拼接全域名：

  async function fetchInfo() {
    const url = `${process.env.REACT_APP_API_URL}/hello`;
    const response = await fetch(url);
    const data = await response.json();
    setResult(data)
  }
  

• 统一依赖安装位置
  Express必须安装在项目根目录的package.json中，不要仅安装在api子目录，执行以下命令后提交依赖文件到仓库：

  npm install express --save
  

• 重新部署验证
  提交所有修改后，在Vercel控制台触发重新部署，部署完成后先通过Postman请求https://你的域名/api/hello确认返回JSON，再测试前端页面的请求逻辑。

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