Next.js POST API路由处理器请求失败（405错误）原因排查

问题场景 #

极简测试环境下，Next.js App Router的GET API路由可正常响应，但改为POST方法后，触发的OPTIONS预请求返回405错误，无法正常处理POST请求。相关代码如下：

正常工作的GET路由 #

// route.ts 
export async function GET() {
  return new Response('Hello, Next.js!', {
    status: 200,
  })
}

触发错误的POST路由 #

// route.ts
export async function POST() {     
  return new Response('Hello, Next.js!', {
    status: 200,
  })
}

出错的POST请求调用 #

const response = await fetch(`${API_BASE_URL}generate/test`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: "AA",
})

核心原因与解决方案 #

1. 未显式处理OPTIONS预请求 #

当请求包含Content-Type: application/json这类非简单头时，浏览器会发送OPTIONS预请求验证权限。Next.js App Router默认不会自动处理这类跨域预请求，需手动添加OPTIONS方法处理：

// route.ts
export async function POST() {     
  return new Response('Hello, Next.js!', {
    status: 200,
  })
}

// 新增OPTIONS处理函数
export async function OPTIONS() {
  return new Response(null, {
    status: 200,
    headers: {
      'Access-Control-Allow-Origin': '*', // 按需替换为指定允许的源
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

2. 请求body格式不符合JSON要求 #

请求头声明了Content-Type: application/json，但body: "AA"不是有效的JSON格式（JSON字符串需被双引号包裹，如"\"AA\""）。需用JSON.stringify生成合法的JSON内容：

const response = await fetch(`${API_BASE_URL}generate/test`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify("AA"), // 或传入对象：JSON.stringify({content: "AA"})
})

3. 路由路径匹配验证 #

确认route.ts文件位于app/generate/test/目录下，路径不匹配会导致路由无法被识别，返回405错误。

验证步骤 #

1. 先添加OPTIONS处理函数，确保预请求返回200状态码
2. 修正请求body为合法JSON格式
3. 重新发起POST请求，即可正常响应

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