Vercel部署Express后端返回index.js文件而非API响应求助

问题原因 #

Vercel默认优先返回静态文件，当根路径无对应静态资源时，会直接返回项目根目录下的index.js文件内容，而非将请求转发给Express应用处理。同时Vercel对Node.js后端部署有特定的路由与入口配置要求。

解决方案 #

1. 添加Vercel配置文件 vercel.json #

在项目根目录创建vercel.json，配置路由规则将所有请求转发到Express应用入口：

{
  "version": 2,
  "builds": [
    {
      "src": "./index.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "/index.js"
    }
  ]
}

该配置会让Vercel将所有路径的请求都交由index.js中的Express应用处理，而非返回静态文件。

2. 调整CORS配置 #

当前CORS仅允许本地前端地址，部署后需添加线上前端域名（如你的Vercel前端部署地址），否则会出现跨域问题：

app.use(cors({
    origin: ["http://localhost:3000", "https://localhost:3001", "https://你的前端Vercel地址.vercel.app"],
    credentials: true,
    methods: ["GET", "POST", "PUT", "DELETE"]
}));

将https://你的前端Vercel地址.vercel.app替换为实际的前端部署域名。

3. 配置Vercel环境变量 #

确保数据库连接字符串等敏感信息在Vercel控制台的Environment Variables中正确配置，本地.env文件中的内容需同步到Vercel环境变量里，避免硬编码在代码中。

4. 优化Express启动逻辑 #

Vercel会自动处理服务器启动，无需手动调用app.listen()，可将启动代码改为仅在本地环境执行：

if (process.env.NODE_ENV !== 'production') {
  app.listen(port, () => console.log(`Server listening on port ${port}`));
}

这能避免Vercel部署时重复启动服务器的问题。

验证部署 #

将以上修改提交到GitHub仓库，重新触发Vercel部署。完成后尝试访问API路由（如https://sps-backend.vercel.app/user/getAreas），应能得到预期的API响应，而非index.js文件内容。

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