next.js 为什么在React服务器组件中对fetch()的204响应会抛出TypeError(无效响应状态代码)?

hwazgwia  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(127)

考虑以下简单的Next.js应用程序:https://codesandbox.io/p/sandbox/next-js-app-router-1bvd7d?file=README.md
我们有一个API路由(/api/hello):

export default function handler(req, res) {
  res.status(204).end();
}

在React服务器组件(RSC)中获取:

export default async function Home() {
  let res;
  try {
    res = await fetch("https://rpvequ-3000.csb.app/api/hello");
    console.log("res.status", res.status);
    console.log("res", res);
  } catch (error) {
    console.log("res in error", res);
    console.log("error", error);
  }
  return (
    <main>
      <p>HELLO WORLD</p>
    </main>
  );
}

fetch抛出以下错误消息:
TypeError:响应构造函数:无效的响应状态代码204
例如,如果我们将HTTP响应从204更改为202,则fetch不再抛出错误。
为什么我们会得到一个204的错误呢?有没有办法在RSC中检查响应是否是204,这样我们就可以根据需要处理它了?
PS:如果你是在 Codesandbox 或其他地方测试它,记得每次重启dev服务器时删除.next文件夹(否则fetch()只使用上次缓存的内容)。

旁注:

React Client 组件中的相同fetch()由于某种原因 not 抛出错误:

"use client";
import React, { useEffect } from "react";

const ClientComp = ({ children }) => {
  useEffect(() => {
    let res;
    (async () => {
      try {
        res = await fetch("http://localhost:3000/api/hello");
        console.log("res.status", res.status);
        console.log("res", res);
      } catch (error) {
        console.log("res in error", res);
        console.log("error", error);
      }
    })();
  }, []);

  return <div>{children}</div>;
};

export default ClientComp;

换句话说,状态码为204 only 的HTTP响应在被 React Server Component 中的fetch()接收时抛出错误,而不是在 React Client Component 中。

相关问题