NextJS 13 API测试工具返回JSON，前端仅获ReadableStream

你的API路由本身没有问题，问题出在客户端组件的fetch调用上——fetch API默认返回的是Response对象，其中的响应体以ReadableStream形式存在，你需要主动调用.json()方法来解析成JSON数据。

错误代码的问题点 #

你当前的handleClick函数里，await fetch()拿到的是包含响应状态、头信息的Response实例，并非直接的JSON内容：

async function handleClick() {
  let data = await fetch("http://localhost:3000/api/test", {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  });
  console.log("data", data); // 这里输出的是Response对象，不是解析后的JSON
}

修改后的正确代码 #

只需在拿到Response后，调用.json()方法解析响应体：

"use client";

export default function ExampleClientComponent({children}) {

  async function handleClick() {
    const response = await fetch("http://localhost:3000/api/test", {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });
    // 新增这一步：解析响应体为JSON
    const data = await response.json();
    console.log("data", data); // 现在会输出 { my: "data" }
  }
   
  return (
    <>
      <button onClick={handleClick}>Go</button>
    </>
  );
}

额外优化建议 #

• GET请求是fetch的默认方法，可以省略method: "GET"参数；
• GET请求通常不需要发送请求体，Content-Type头也可以省略；
• 使用相对路径/api/test代替绝对路径，更适配不同部署环境：

async function handleClick() {
  const response = await fetch("/api/test");
  const data = await response.json();
  console.log("data", data);
}

补充说明 #

你的API路由完全正常——从测试工具的响应可以看到，NextResponse.json()已经正确设置了Content-Type: application/json响应头，返回的是标准JSON内容。浏览器fetch的设计就是分两步：先获取响应元数据，再解析响应体，和后端返回的格式无关。

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