Next.js中如何获取getServerSideProps设置的SSR响应头token

你在getServerSideProps中设置的Authorization响应头是服务端返回给浏览器的HTTP导航响应头，浏览器没有向页面JavaScript暴露读取当前页面初始加载响应头的API，所以你没法在客户端组件代码里直接读到这个头——你能在开发者工具网络面板看到这个头，是因为浏览器本身接收了响应信息，但没有开放对应读取权限给页面运行的JS。

直接在getServerSideProps中把token通过props传递给页面组件即可，这是Next.js SSR场景下服务端向页面传值的标准方式，不需要绕路读响应头：

export async function getServerSideProps(ctx: NextPageContext) {
  const token: string = "Sample token"
  ctx.res?.setHeader("Authorization", token);

  return {
    props: {
      token // 将token注入props
    }
  }
}

// 组件从入参中解构获取token
const HomePage: NextPage<{token: string}> = ({ token }) => {
  // 此处直接使用token即可
  return (
    <div>获取到的令牌：{token}</div>
  )
}

export default HomePage

• 如果你是想在客户端发起后续接口请求时读取自定义响应头，只有通过fetch/axios等XHR方式发起的异步请求，才可以读取对应响应的头信息；这种场景需要你在服务端配置CORS响应头Access-Control-Expose-Headers: Authorization，否则跨域场景下前端JS无法读取Authorization头。
• 初始SSR页面导航的响应头没有任何前端API可以读取，不要尝试在这个方向上找解决方案。
• 敏感鉴权token不要明文传递到客户端，仅将客户端需要使用的公开令牌通过props传递即可。

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