Cookie 不适用于跨站点配置。我正在使用 React (Next.js) 和 Node.js (Express)

Question

我正在开发一个应用程序，前端使用 React 和 Next.js，后端使用 Node.js 和 Express。我的登录使用cookie，在本地主机中一切都工作得更好，但是当我进行部署时，我有两个应用程序。我的前端应用程序部署在 now.sh 中，我的后端应用程序部署在 Heroku 中。当我尝试在生产中发出登录请求时，一切正常，cookie 位于响应中，并且标头“Set-Cookie”存在。但是我的浏览器（Chrome）没有将 cookie 存储在 Application >> Cookies 中，显然我的前端应用程序不知道 cookie 并且它是未定义的

这是我的代码：

服务器.js

app.use(
  cors({
    credentials: true,
    origin: process.env.CLIENT_URL, // contains the frontend url
    methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

当我向前端做出响应时验证路由

return res
      .cookie("token", session.token, {
        httpOnly: true,
        sameSite: "None",
        maxAge: 1209600000,
        secure: process.env.NODE_ENV === "production",
      })
      .status(200)
      .json({
        success: true,
        token: session.token,
        user,
      });

在前端发出请求

const { data } = await Axios.post(login, // backend url to make the request
      { email, password },
      { withCredentials: true });

浏览器中的响应

Cookie 选项卡中的 Cookie 信息

Answer 1

我看到您设置的令牌 cookie 是一个http-onlycookie，因此您的应用程序无法使用它。

正如MDN 文档中引用的

JavaScript Document.cookie API 无法访问具有 HttpOnly 属性的 cookie；它仅发送到服务器。例如，保存服务器端会话的 cookie 不需要可供 JavaScript 使用，并且应该具有 HttpOnly 属性。此预防措施有助于减轻跨站点脚本 (XSS) 攻击。