Question

我已经尝试解决这个问题几个小时了，但不幸的是，我不明白我做错了什么。

我有一个带有外部 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 中获取空值，但我确实在应用程序选项卡中看到了它。

<块引用>

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

<块引用>

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

也许这与不同的子域或其他原因有关，因为当我在本地主机上运行两者时，一切正常。

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

我做错了什么？

谢谢！

Answer 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。这基本上是一件好事，因为它可以帮助我们保护系统。

Next.js - 无法从 getServerSideProps 访问 cookie

1 个答案: