Next.js getServerSideProps 重定向 ERR_HTTP_HEADERS_SENT 错误答案

【问题标题】：Next.js getServerSideProps redirection ERR_HTTP_HEADERS_SENT errorNext.js getServerSideProps 重定向 ERR_HTTP_HEADERS_SENT 错误
【发布时间】：2021-04-23 08:17:58
【问题描述】：

我正在尝试使用 Next.js 创建一个私人页面。

我写了pages/private.tsx。

import React from 'react';
import { Label } from '@components/atoms';
import { Layout } from '@components/Layout';
import Link from 'next/link';
import { GetServerSideProps } from 'next';

const Private = (props: any) => {
  console.log(props);
  return (
    <Layout>
      <Link href="/">
        <a>
          <Label size="L1" margin="32px 0 0 24px" pointer>
            Go Back to Home
          </Label>
        </a>
      </Link>
    </Layout>
  );
};

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  // redirect test: always redirect to '/login'
  ctx.res.setHeader('Location', '/login');
  ctx.res.statusCode = 302;
  ctx.res.end();
  return {
    props: {},
  };
};

export default Private;

效果很好。如果我尝试转到/private，它会重定向到/login。

浏览器没问题，但我的控制台说，

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
    at ServerResponse.setHeader (_http_outgoing.js:526:11)
    at DevServer.sendHTML (Directory/node_modules/next/server/next-dev-server.ts:663:9)
    at DevServer.render (Directory/node_modules/next/next-server/server/next-server.ts:1232:17)
    at Object.fn (Directory/node_modules/next/next-server/server/next-server.ts:726:11)
    at Router.execute (Directory/node_modules/next/next-server/server/router.ts:247:24)
    at DevServer.run (Directory/node_modules/next/next-server/server/next-server.ts:1158:23)
    at DevServer.handleRequest (Directory/node_modules/next/next-server/server/next-server.ts:551:14) {
  code: 'ERR_HTTP_HEADERS_SENT'
}

我认为原因是服务器向浏览器发送响应后，我再次尝试发送 302 状态码。

有没有办法修复这个错误？

++ 我试图在客户端制作重定向代码，但它会显示私人页面一秒钟并被重定向。我想阻止初始加载。

【问题讨论】：

标签： reactjs redirect next.js

【解决方案1】：

你可以退货

return {
  redirect: {
    permanent: false,
    destination: "/login",
  },
  props:{},
};

而不是设置标题。

该错误是由于 serversideprops 发送的两个响应而出现的。一个在返回中，一个在标题中。

你可以阅读更多关于重定向here

【讨论】：