Next.js 14生产环境POST请求报405错误，本地正常求解决

1. 修复API路由中的参数错误 #

你的API路由代码存在参数名拼写错误，这会导致生产环境路由处理失败，间接触发405错误：

export async function POST(request: Request){
    console.log("calling post request!!!!")
    const data  = await req.json() // 此处使用了未定义的`req`，函数参数应为`request`
    console.log("POSTING SOME DATA: ", data)

    return NextResponse.json(data)
}

修正后代码：

export async function POST(request: Request){
    console.log("calling post request!!!!")
    const data  = await request.json()
    console.log("POSTING SOME DATA: ", data)

    return NextResponse.json(data)
}

2. 确认API路由目录结构符合App Router规范 #

Next.js 14默认使用App Router，API路由必须遵循以下结构，否则生产环境无法识别路由：

app/
└── api/
    └── email/
        └── route.ts  # 必须是route.ts/route.js文件名

若你的路由文件放在pages/api目录（Pages Router结构）但项目启用App Router，会导致路由失效返回405。

3. 修正前端FormData的传递方式 #

前端函数接收FormData类型，但直接用JSON.stringify(data)转换是错误的——FormData无法被正确序列化为JSON，会导致请求体格式异常，服务器无法识别请求方法。

方案一：转为JSON格式传递 #

先将FormData转为普通对象再序列化：

export async function simplePost(data: FormData, setEmailSent, setError) {
  const apiEndpoint = '/api/email';
  const formDataObj = Object.fromEntries(data.entries());

  const res = await fetch(apiEndpoint, {
      method: 'POST',
      body: JSON.stringify(formDataObj),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
     },
    })
  if(res.ok){ // 用res.ok覆盖所有2xx成功状态码
    setEmailSent(true);
  }else{
    setError(true);
  }
}

方案二：直接传递FormData #

若后端期望接收FormData，直接传递即可，无需手动设置Content-Type（浏览器会自动添加正确的请求头）：

export async function simplePost(data: FormData, setEmailSent, setError) {
  const apiEndpoint = '/api/email';

  const res = await fetch(apiEndpoint, {
      method: 'POST',
      body: data,
    })
  if(res.ok){
    setEmailSent(true);
  }else{
    setError(true);
  }
}

对应的API路由需改为解析FormData：

export async function POST(request: Request){
    const data  = await request.formData()
    console.log("POSTING SOME DATA: ", data)
    return NextResponse.json(Object.fromEntries(data.entries()))
}

4. 检查部署平台的路由配置 #

若使用Vercel、Netlify等平台部署，确认没有自定义重写规则或路由配置覆盖/api/email的POST请求。比如vercel.json中的重写规则可能导致请求被错误转发，触发405。

5. 验证生产环境API端点可达性 #

用curl或Postman直接测试生产环境端点，确认路由是否正常：

curl -X POST https://your-domain/api/email -H "Content-Type: application/json" -d '{"test":"data"}'

若返回405说明路由未正确注册；若返回500，查看生产环境函数日志（如Vercel日志）获取具体错误信息。

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