前后端API响应结构不一致问题求助

问题背景 #

前端调用后端API时，返回的响应结构与预期不符：后端API应返回包含嵌套对象（如category、size）和数组（如images）的JSON结构，但前端接收到的是不含嵌套数据的简化结构，导致客户端无法正确处理数据。

后端使用Prisma查询时已通过include指定关联字段，Postman直接调用API能返回完整结构，但前端用fetch或axios调用时嵌套数据丢失。已确认请求URL正确、无跨域问题，前端TypeScript接口与预期结构匹配。

排查与解决方案 #

1. 修复Prisma查询结果的序列化问题 #

Prisma返回的product对象是Prisma Client生成的实例，包含内部元数据，直接用NextResponse.json序列化可能无法正确处理嵌套关联字段。可以手动转换为普通JSON对象：

// 后端API修改
const product = await prismadb.product.findUnique({
  where: { id: params.productId },
  include: { images: true, category: true, size: true, color: true },
});

// 转换为普通对象后返回
return NextResponse.json(JSON.parse(JSON.stringify(product)));

或者使用Prisma提供的toJSON方法（部分版本支持）：

return NextResponse.json(product.toJSON());

2. 检查全局API中间件的响应拦截 #

如果项目中存在Next.js全局中间件（如middleware.ts），检查是否有逻辑对API响应进行了字段过滤或修改。比如某些中间件可能会移除未明确允许的字段，导致嵌套数据被截断。

3. 验证前端接收的原始响应 #

在前端fetch请求中打印原始响应文本，确认是后端返回问题还是前端解析问题：

const getProduct = async (id: string): Promise<Product> => {
  const url = `${URL}/${id}`;
  const res = await fetch(url);
  // 打印原始响应文本
  const rawText = await res.text();
  console.log('原始响应:', rawText);
  const data = JSON.parse(rawText);
  console.log('解析后数据:', data);
  return data;
};

如果原始响应文本就没有嵌套数据，说明问题出在后端；如果原始文本有但解析后丢失，再排查前端是否有其他数据处理逻辑。

4. 确认API端点与环境变量 #

在浏览器控制台打印process.env.NEXT_PUBLIC_API_URL，确认前端实际调用的API地址与Postman使用的一致，避免因环境变量配置错误调用了旧版本或其他环境的API。

5. 明确设置响应Content-Type #

后端返回时明确指定Content-Type为application/json，避免前端解析时出现异常：

return new NextResponse(JSON.stringify(product), {
  headers: {
    'Content-Type': 'application/json',
  },
});

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