httpOnly cookie 未随 getInitialProps [Next.js] 的请求一起发送

Question

我正在从服务器设置一个httpOnly cookie (jwtToken)，它正在前端设置。我可以在 devTools 中看到 cookie。

现在，如果我使用以下代码从 getInitalProps 向服务器发出请求，

  const data = await fetch(`${process.env.API_URL}/me`, {
    credentials: 'include',
  }).then((res) => res.json());

jwtToken cookie 不会随请求一起发送。

我也试过这样做

  const data = await fetch(`${process.env.API_URL}/me`, {
    credentials: 'include',
    headers: {
      cookie:  context.req.headers.cookie
    },
  }).then((res) => res.json());

但效果并不好。

但是，当我从useEffect 发出相同的请求时 它完美地工作。谁能帮我把jwtToken从getInitialProps发送到服务器吗？

Answer 1

实际问题是缺少来自context.req.headers.cookie 的jwtToken cookie。它可以在本地主机上工作，但不能在生产环境上工作。

解决这个问题的方法是在你的 cookie 上设置domain。因此，如果前端位于 example.com 且 API 服务器位于 api.exmaple.com 上，则将域设置为 .example.com 即可解决此问题。

res.cookie('jwtToken', token, { httpOnly: true, domain: '.example.com'});

Answer 2

关于何时调用 getInitialProps 存在很多混淆。

有 2 个上下文调用它：

1. 服务器端，当初始页面被渲染时。这意味着您的客户端在请求中发送 cookie，您需要将其转发给“服务器到服务器”请求。

2. 客户端，在第二页（客户端导航）。这意味着浏览器将 cookie 附加到 ajax 请求中。

Component.getInitailProps = async context => {
  const data = await fetch(`${process.env.API_URL}/me`, {
    credentials: 'include', // tells the browser to attach cookies
    ...(context.req
      ? {
          headers: {
            Cookie: Object.entries(context.req.headers.cookie)
              .map(([key, value]) => `${key}=${value}`)
              .join('; '),
          },
        }
      : {}),
  }).then(res => res.json());
};

对于服务器端，您需要传递一个字符串，因此，我使用Array.map 构造cookie 字符串。