Next.js - 无法从 getServerSideProps 访问 cookie [关闭]答案

【问题标题】：Next.js - can't access cookies from getServerSideProps [closed]Next.js - 无法从 getServerSideProps 访问 cookie [关闭]
【发布时间】：2021-09-26 00:11:23
【问题描述】：

我已经尝试修复此问题几个小时，但不幸的是，我无法理解我做错了什么。

我有一个带有外部 rest API 的 Next.JS 应用程序（我使用 Express 构建的，地址与客户端不同）。当用户登录时，我发送一个 httpOnly cookie：

res.setHeader("Set-Cookie", cookie.serialize("token", token, {
httpOnly: true,
secure: process.env.MODE_ENV !== "development",
maxAge: 60 * 60 * 24 * 31,
sameSite: 'None',
path: '/',
}));

return res.status(200).send({
message: 'Logged in',
token,
email: result[0]['user_email']

});

上面的代码有效 - 当我登录时，我可以在 Chrome 的“应用程序”选项卡中看到 cookie。

然后在Next.JS中我有一个名为index.js的页面组件，里面有这个函数：

export async function getServerSideProps(context) {
  try {
    const token = context.req.cookies?.token || null; // I can't get this, even though I have it in app tab

const settings = {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Authorization': 'Bearer ' + token
  },
  body: JSON.stringify({})
};

它的主要目的是在我输入 index.js 时从浏览器中获取 cookie，然后在 POST 请求中作为授权发送它，以获取我们想要的值，问题是 - 我总是从令牌 cookie 中得到 null，但我确实在应用程序选项卡中看到它。

我的 API 地址是：'api.domain.com/api'

我的客户地址是：'client.domain.com'

也许它与不同的子域或其他东西有关，因为当我在 localhost 上同时运行时，一切正常。

顺便提一下，cors的来源是：client.domain.com

我做错了什么？

谢谢！

【问题讨论】：

控制台日志中context.req.cookies.token是什么
我找到了解决办法，请看下面的答案。
感谢您花时间记录您的解决方案。
@Nick.McDermaid 没有什么可记录的，我只是在属性域中添加了一行代码（属性名称说明了一切）

标签： node.js express cookies next.js

【解决方案1】：

我的错误是在没有域属性的情况下登录时将 cookie 从服务器发送到客户端，正如我所说，我的 API 地址不同（它是一个子域，但仍然不同）。这意味着客户端无法访问 cookie。我只需要在服务器端进行更改：

res.setHeader("Set-Cookie", cookie.serialize("token", token, {
httpOnly: true,
secure: process.env.MODE_ENV !== "development",
maxAge: 60 * 60 * 24 * 31,
sameSite: 'None',
path: '/',
}));

到这里：

res.setHeader("Set-Cookie", cookie.serialize("token", token, {
httpOnly: true,
secure: process.env.MODE_ENV !== "development",
maxAge: 60 * 60 * 24 * 31,
sameSite: 'None',
domain: '.domain.com', // Added this line
path: '/',
}));

如果没有上面的行（域属性），客户端的浏览器将无法将 cookie 发送到我们的 API。基本上这是一件好事，因为它可以帮助我们保护系统。

【讨论】：