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

【问题标题】：Cookies doesn't work with Cross-site config. I'm using React (Next.js) and Node.js (Express)Cookie 不适用于跨站点配置。我正在使用 React (Next.js) 和 Node.js (Express)
【发布时间】：2020-10-26 06:44:16
【问题描述】：

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

这是我的代码：

Server.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 信息

【问题讨论】：

如果您使用 express 来调试您的问题的一种方法，创建一个中间件，该中间件将在服务器中打印请求的标头以查看您正在使用的信息，我猜应该是 @987654326 @
感谢您的建议！我正在尝试
@NicolásLeal 你能解决这个问题吗？我需要将我的应用程序投入生产并面临完全相同的问题
@KaranKumar no )：我无法解决这个问题。我认为谷歌改变了他们的政策，现在我们不能提出这种类型的请求。

标签： javascript node.js reactjs cookies next.js

【解决方案1】：

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

引用于MDN docs

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

【讨论】：

现在，如果我通过授权验证向后端发出请求，它可以工作，但在前端，cookie 不存在??
抱歉，您的意思是，您将无法访问 Javascript 中的 cookie 对吧？
例如，如果我想发出 get 请求以从我的应用程序中检索用户，则后端中的端点需要 cookie 授权（它是中间件）。当我在前端发出请求时，一切正常，但是 cookie 没有存储在浏览器中的应用程序> Store> Cookies 中，当你登录时它应该存储在那里

【解决方案2】：

过去几天我一直在经历这个“cookie”问题，我的头撞在墙上。尝试在会话设置之前将此行添加到您的 server.js：

app.set("trust proxy", 1);

【讨论】：