部署至Vercel后fetch请求出现ERR_ABORTED 405错误求助

核心问题 #

你遇到的405错误和端口超时问题，本质是Vercel的部署规则和本地Node.js服务的运行逻辑完全不同：

1. Vercel不支持本地用app.listen()启动服务的方式，要求后端代码以Serverless Functions的形式部署
2. 线上服务的端口由Vercel自动分配，不能指定3000，客户端请求也不需要带端口
3. 405错误是因为Vercel没有正确识别你的POST路由，要么是文件结构不符合规范，要么是请求路径错误

具体修复步骤 #

1. 调整后端代码结构（必须） #

Vercel要求后端接口放在项目根目录的api文件夹下，比如创建api/submit.js（文件名自定义，对应请求路径）。

替换服务器代码

去掉app.listen()，改成以下两种方式之一：

方式一：基于Express导出实例

const express = require('express');
const app = express();

// 必须添加这个中间件，解析JSON请求体
app.use(express.json());

app.post('/', (req, res) => {
    // 你的业务逻辑，比如处理req.body
    console.log('收到的请求数据:', req.body);
    res.status(200).json({ status: 'success', data: req.body });
});

// 导出Express实例，Vercel会自动处理服务启动
module.exports = app;

方式二：直接导出Vercel Serverless处理函数（更轻量化）

module.exports = function handler(req, res) {
    // 只允许POST请求
    if (req.method !== 'POST') {
        res.setHeader('Allow', ['POST']);
        return res.status(405).end(`Method ${req.method} Not Allowed`);
    }

    // 处理请求数据
    const requestData = req.body;
    // 你的业务逻辑
    res.status(200).json({ status: 'success', data: requestData });
};

2. 修改客户端请求路径 #

把fetch的地址改成Vercel域名加上api路径，示例：

export async function saveToDB(obj) {
    const objStr = JSON.stringify(obj); // JSON.stringify是同步方法，无需await
    await fetch('https://[name].vercel.app/api/submit', { // 对应api/submit.js文件
        method: 'POST',
        headers: { 'Content-Type':'application/json' },
        body: objStr,
    });
}

3. 本地测试（可选但推荐） #

用Vercel CLI模拟线上环境测试，避免本地与线上差异：

# 安装Vercel CLI
npm i -g vercel
# 启动本地开发服务
vercel dev

此时本地请求路径为http://localhost:3000/api/submit，和线上保持一致。

常见坑点提醒 #

• 不要在服务器代码里指定固定端口，app.listen()在Vercel上完全无效
• 必须添加express.json()中间件，否则服务器无法解析JSON请求体，会导致req.body为undefined
• 客户端请求不要带端口3000，线上HTTPS服务默认用443端口，浏览器会自动处理

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