Next.js API接口返回响应后，客户端无法读取body中的message字段

问题本质 #

你看到的body: (...)是因为fetch返回的Response对象的body是可读流，不会自动解析成JSON，必须主动调用解析方法才能读取里面的内容。另外你的代码还有两处细节错误需要修正。

1. 修正客户端代码：解析响应体并匹配接口路径 #

首先，fetch的路径要和服务端文件对应（你之前写的/api/mbti/result和服务端的/api/calculation.js不匹配），然后调用res.json()解析响应体，才能拿到message字段：

fetch('/api/calculation', {
   method: 'POST',
   headers: {
      Accept: 'application/json, text/plain, */*',
      'Content-Type': 'application/json',
   },
   body: JSON.stringify(values),
}).then((res) => {
   return res.json(); // 解析JSON格式的响应体
}).then((data) => {
   console.log(data.message); // 这里就能直接拿到返回的message了
   if (data.status === 200) {
      resetForm();
   }
}).catch((err) => {
   console.error('请求出错:', err);
});

2. 修正服务端代码：规范状态码与逻辑终止 #

服务端有两个小问题：

• 状态码要传数字，不能传字符串（res.status('403')改成res.status(403)）
• 非POST请求判断后要终止函数，不然后面的响应代码还会执行，导致逻辑混乱

const handler = (req, res) => {
  if (req.method !== 'POST') {
    return res.status(403).json({
      status: 403,
      message: 'Forbidden',
    });
  }

  // 这里写你的计算逻辑

  // 用res.json()返回JSON，自动设置正确响应头
  return res.status(200).json({ status: 200, message: 'Hello from Next.js!' });
};

export default handler;

验证效果 #

修改完成后，客户端就能正常打印出服务端返回的message内容，表单重置逻辑也能正常触发。

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