Next.js中如何获取POST请求错误响应的JSON对象值

问题出在你抛出错误时只传递了状态码，没有读取后端返回的错误响应体。要拿到包含提示文本的JSON，需要在抛出错误前先解析错误响应的内容。

修改前端请求代码 #

try {
  const res = await fetch("/api/email-registration", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      emailValue: emailValue,
    }),
  });

  if (!res.ok) {
    // 先解析错误响应的JSON内容
    const errorResponse = await res.json();
    // 抛出包含错误消息的自定义错误
    throw new Error(errorResponse.message || `请求失败：${res.status}`);
  }

  const data = await res.json();
  setMessage(data.message);
} catch (err) {
  // 这里就能拿到后端返回的错误提示文本了
  setMessage(err.message);
  console.log(err);
}

原理说明 #

fetch API只有在网络层面失败时才会自动抛出错误，HTTP状态码非2xx（比如409）属于业务错误，不会触发自动抛出。这时候你仍然可以调用res.json()读取响应体，解析出后端返回的错误信息后再手动抛出，就能在catch块中获取到完整的错误提示。

如果需要同时保留状态码和错误消息，可以抛出自定义对象：

// 在if (!res.ok)块中
const errorResponse = await res.json();
throw {
  status: res.status,
  message: errorResponse.message
};

// 在catch块中
catch (err) {
  setMessage(err.message);
  console.log(`状态码：${err.status}`);
}

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