NextJs 14调用/api/products接口出现405方法不允许错误求助

错误原因 #

你使用的是Next.js 14的App Router，但API路由采用了Pages Router的写法。App Router要求在route.js中导出对应HTTP方法的独立函数（如GET、POST），而非统一的handle函数，这导致你的POST请求无法被正确识别，返回405 Method Not Allowed错误。

解决方法 #

修改app/api/products/route.js，遵循App Router的API路由规范：

import { Product } from '../../../models/Product'
import { mongooseConnect } from '../../lib/mongoose'

// 处理GET请求
export async function GET() {
  await mongooseConnect()
  const products = await Product.find()
  return Response.json(products)
}

// 处理POST请求
export async function POST(request) {
  await mongooseConnect()
  const { title, description, price } = await request.json()
  const productDoc = await Product.create({
    title, description, price,
  })
  return Response.json(productDoc)
}

关键说明 #

• App Router的API路由不再使用传统的req、res对象，而是通过函数参数接收请求实例（如POST方法中的request），并返回标准的Response对象。
• 你的客户端组件代码（products.js）中的POST请求逻辑无需修改，修改完API路由后即可正常调用接口。

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