使用Next.js 13.4开发后台面板时POST请求出现405错误排查

核心问题：API路由写法与所用路由系统不匹配 #

Next.js 13.4有两种独立的路由系统：App Router（默认启用）和Pages Router，两者的API路由实现逻辑完全不同。你的路由代码采用了Pages Router的写法，如果项目实际使用的是App Router结构，就会导致POST请求无法被识别处理，返回405错误。

情况1：项目使用App Router（存在app/目录） #

App Router要求API路由必须放在app/api/[路由名]/目录下，且文件名固定为route.js，需要显式导出对应HTTP方法的函数（如POST、GET），而非导出默认的handler函数。

你的当前路由代码是Pages Router的写法，在App Router中不会被识别为POST请求的处理逻辑，因此请求被拒绝。

修正后的路由代码：

// app/api/products/route.js
export async function POST(req) {
  const requestData = await req.json();
  // 此处添加产品创建的业务逻辑
  return Response.json({ 
    method: req.method,
    receivedData: requestData
  });
}

// 若需支持GET请求，可额外导出GET函数
export async function GET() {
  return Response.json({ method: 'GET' });
}

情况2：项目使用Pages Router（存在pages/目录） #

如果项目基于Pages Router开发，路由文件需放在pages/api/products.js，当前代码理论上可处理所有请求方法，但仍需排查以下可能：

• 确认路由文件路径正确：必须是pages/api/products.js，无嵌套错误或文件名拼写失误。
• 检查中间件拦截：是否存在middleware.js限制了API路由的请求方法（如仅允许GET）。
• 验证请求到达情况：在handler中添加console.log(req.method)，启动项目后查看终端是否输出POST，若未输出，说明请求未到达路由，需排查路径或中间件问题。

额外检查项 #

• 前端请求路径确认：确保axios请求路径为/api/products，无拼写错误（如少写s或多添斜杠）。
• 重启开发服务器：修改路由文件后，有时需重启Next.js开发服务器才能使变更生效。

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