Next JS 13 Beta中MongoDB GET请求NextResponse.json失效求助

针对你遇到的POST正常但GET请求无法返回数据的情况，结合Next.js 13 Beta的API路由特性，按以下步骤排查解决：

1. 确认API路由的目录结构与写法（核心问题） #

Next.js 13 Beta默认启用App Router，API路由需遵循新规范：

• 路由文件必须放在 app/api/products/route.js 路径下
• 需显式导出 GET 异步函数，而非Pages Router的默认导出

错误示例（Pages Router写法，在App Router中无效）：

// 错误：App Router不支持这种写法
export default async function handler(req, res) {
  if (req.method === 'GET') {
    // ...逻辑
    res.status(200).json(products);
  }
}

正确示例（App Router写法）：

import { NextResponse } from 'next/server';
import connectDB from '../../lib/mongodb'; // 你的DB连接文件
import Product from '../../models/Product'; // 你的Product模型

export async function GET() {
  try {
    await connectDB();
    // 使用lean()返回普通JS对象，避免mongoose文档的循环引用问题
    const products = await Product.find({}).lean();
    console.log(products); // 控制台正常打印
    // 显式返回JSON响应，可指定状态码
    return NextResponse.json(products, { status: 200 });
  } catch (error) {
    // 捕获并返回错误，方便调试
    return NextResponse.json({ error: error.message }, { status: 500 });
  }
}

2. 处理MongoDB文档的序列化问题 #

即使控制台能打印数据，mongoose返回的文档对象可能包含循环引用，导致NextResponse.json无法正确序列化。解决方法：

• 查询时添加.lean()，直接获取普通JS对象（如上例）
• 或手动转换为JSON字符串再解析：

const products = await Product.find({});
return NextResponse.json(JSON.parse(JSON.stringify(products)));

3. 检查响应头与CORS设置 #

虽然Postman不受CORS限制，但如果后续浏览器请求需兼容，或存在自定义中间件影响响应头，可手动设置：

export async function GET() {
  // ...查询逻辑
  const response = NextResponse.json(products);
  // 允许跨域（根据实际需求调整Origin）
  response.headers.set('Access-Control-Allow-Origin', '*');
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  return response;
}

4. 排查中间件拦截 #

若项目中有middleware.js，检查是否拦截了GET请求。确保中间件对/api/products路径放行，例如：

export function middleware(request) {
  // 排除API路由
  if (request.nextUrl.pathname.startsWith('/api/')) {
    return NextResponse.next();
  }
  // ...其他中间件逻辑
}

5. 重启服务器并验证代码生效 #

Next.js 13 Beta的热更新可能存在不稳定情况，修改代码后手动重启服务器（npm run dev重新执行），确保最新代码运行。

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