Next.js部署Vercel后/api/sendemail报405 Method Not Allowed错误

问题概述 #

本地运行正常的Next.js项目，部署到Vercel后，向/api/sendemail发起POST请求时出现405 Method Not Allowed错误，同时/contact页面发消息、/article页面图片上传功能异常。

原因分析与解决方案 #

1. API路由文件结构不符合App Router规范 #

你的API代码采用Next.js App Router格式（导出POST/GET函数），需严格遵守Vercel部署路径要求：

• 确保API文件放在app/api/sendemail/route.js（或.ts）路径下，不能误放在pages/api目录（Pages Router格式），否则Vercel会按错误的路由规则处理，导致方法不匹配。
• 检查仓库内的文件位置，若路径错误，调整到正确的app/api子目录下。

2. 前端请求路径配置错误 #

前端请求使用了${FRONTEND_URL}/api/sendemail，存在以下问题：

• FRONTEND_URL在本地可能是http://localhost:3000，但线上环境无需完整域名，直接使用相对路径/api/sendemail即可避免跨域或URL拼接错误。
• 修改前端请求代码：

// 原代码
const res = await fetch(`${FRONTEND_URL}/api/sendemail`, { ... })

// 修改后
const res = await fetch('/api/sendemail', {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(formData),
})

3. Vercel环境变量未配置或未生效 #

后端依赖MAILTRAP_USERNAME、MAILTRAP_PASSWORD、RECEIVER_EMAIL三个环境变量：

• 登录Vercel控制台，进入项目的「Settings」→「Environment Variables」，添加这三个变量，取值需与本地.env文件一致。
• 添加完成后，必须重新部署项目，确保Vercel加载最新的环境变量。

4. API路由执行异常（环境变量缺失/依赖错误） #

当前API代码未做环境变量校验，若变量缺失会导致nodemailer初始化失败，进而引发请求异常。可在代码中添加校验：

export async function POST(req) {
  try {
    // 新增环境变量检查
    if (!process.env.MAILTRAP_USERNAME || !process.env.MAILTRAP_PASSWORD || !process.env.RECEIVER_EMAIL) {
      return NextResponse.json(
        { error: "环境变量缺失" },
        { status: 500 }
      );
    }

    // 原有业务代码...
  } catch (error) {
    // 原有错误处理...
  }
}

5. 日志排查 #

进入Vercel控制台的「Functions」→「Logs」，查看sendemail函数的执行日志，可直接定位请求失败的具体原因（如依赖安装失败、环境变量未加载等）。

额外排查（针对/article页面上传功能） #

该功能异常大概率与/api/sendemail问题逻辑一致：

• 检查上传接口的路径是否符合App Router规范。
• 确认相关环境变量（如存储服务密钥）已在Vercel配置。
• 验证请求方法、跨域设置是否正确。

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