Vercel部署应用后出现Request failed with status code 405错误求助

算力阿峰

2026-7-15

问题描述

本地服务器运行项目完全正常，但部署到Vercel后出现Request failed with status code 405错误
前端和后端均部署在Vercel上
在线项目：doithero.vercel.app
源代码：
- 前端：sujaltangde/doithero
- 后端：sujaltangde/DoItHero-Backend
错误截图：405错误截图
目标：修复错误，让项目正常运行

405错误修复方案

405错误本质是HTTP请求方法不被目标接口允许，结合Vercel部署场景，按以下步骤排查修复：

核对前后端请求方法一致性
检查前端发起请求的方法（如POST/GET/PUT）和后端路由定义的方法是否完全匹配。比如前端用POST请求某接口，但后端仅配置了GET路由，就会触发405。

修正Vercel后端路由配置
Vercel部署Node.js后端时，需确保vercel.json配置正确，示例配置（适配Express框架）：

{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "/api/$1" }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Methods", "value": "GET, POST, PUT, DELETE, OPTIONS" },
        { "key": "Access-Control-Allow-Origin", "value": "https://doithero.vercel.app" }
      ]
    }
  ]
}

若后端用Serverless函数，需将函数文件放在api目录下，文件名对应路由（如api/task.js对应/api/task接口）。

处理CORS预请求（OPTIONS）
跨域场景下前端会先发送OPTIONS预请求，若后端未处理该方法会导致405。可通过两种方式解决：

使用cors中间件（Express框架）：

const cors = require('cors');
app.use(cors({
  origin: 'https://doithero.vercel.app',
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS']
}));

手动处理OPTIONS请求：

app.options('*', (req, res) => {
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.header('Access-Control-Allow-Origin', 'https://doithero.vercel.app');
  res.sendStatus(200);
});