如何在Next.js中为404页设置状态代码404而不是200

Question

我已经询问了如何在Next.js中将404状态代码设置为404页，但是我得到的响应是，这不是真的，默认情况下状态代码是404。我无法在评论中展示打印屏幕，所以我想在这里展示它们，并可能得到我想要的答案。事实上，所有错误的请求都有404的状态代码，而404页本身有状态200。

如您所见，前两个位置的状态代码为200。我希望每次当url与我的页面目录中的页面不匹配时触发404，但是返回状态代码404而不是200。或者，如果这是可能的话，我宁愿用状态代码301重定向到404页，而重定向后的url被重定向为例如。/404?url=%2Fbadrequest。请你至少指出我的方向好吗。我不知道应该由客户端还是服务器端来完成。我想我需要在服务器端做出反应来设置正确的响应代码，但是怎么做呢？要重定向和建立一个像/404?url=%2Fbadrequest这样的url，它必须是客户端还是服务器端？

非常感谢

Answer 1

您所引用的前两个请求是脚本和fetch/XHR请求，而不是页面(请参阅Type，它将是页面的document；或者，您可以在过滤器中选择“document”)。页面(/badrequest)是在图像中的最后一个请求中请求的(并使用404状态代码进行响应)。这些JS文件只是用来呈现404错误组件。

对于重定向部分，您可以这样做：

// pages/[...slug.js]

const Fake = () => <></>;
export default Fake;

const getServerSideProps = async ({ req }) => {
  return {
    redirect: {
      destination: `/404?url=${encodeURI(req.url)}`,
      permanent: true
    }
  };
};

export { getServerSideProps };

// pages/404.js

import { useRouter } from "next/router";
import { useEffect, useState } from "react";

const ErrorPage = () => {
  const { asPath: path } = useRouter();
  const [currentPath, setCurrentPath] = useState("");

  useEffect(() => {
    setCurrentPath(
      decodeURI(
        new URLSearchParams(path.replace(/^.*?\?/, "")).get("url") || ""
      )
    );
  }, [path]);

  return <div>{currentPath} Not Found</div>;
};

export default ErrorPage;

结果：

​

​

代码沙箱：Codesandbox.io/s/苦-glade-btrcp

PS:状态代码308的意思是“永久重定向”

如果您想要301状态代码，那么将pages/[...slug.js]更改为：

const Fake = () => <></>;
export default Fake;

const getServerSideProps = async ({ req, res }) => {
  res.writeHead(301, { location: `/404?url=${encodeURI(req.url)}` }).end();
  return { props: {} };
};

export { getServerSideProps };

我已经相应地更新了沙箱。