应用程序部署后会话 cookie 未保存

Question

我使用 React 创建了一个前端应用程序，然后将其部署在 Netlify 上。前端应用程序与我创建并部署到 Render 的 Express 后端应用程序进行交互。前端和后端之间的任何交互都受到使用 Passportjs 的身份验证的保护。后端应用程序使用护照本地策略来验证 mongoDB 连接是否用户存在/用户名和密码是否正确。确认后，我使用护照序列化和反序列化功能来维护登录会话。

在开发过程中，我在 http://localhost 上完成了这个应用程序。在此期间，一切都按计划进行。登录会话被保存为 cookie，我可以通过前端应用程序将其发送，作为将来请求后端应用程序以验证用户身份的一部分。

当我将前端应用程序部署到 Netlify 并将后端应用程序部署到 Render 时，会话 cookie 不再保存，这意味着用户永远无法在后端进行身份验证，因为登录后的每个请求都没有保存的会话 cookie 可以发送到后端.

更详细一点，对于与 Passport 结合使用来创建登录会话的 Express-Session，我使用 connect-mongo 将会话存储在 MongoDB 上。每次我通过前端登录时，我都可以看到正在创建的会话并将其存储在 MongoDB 中。问题似乎是 cookie 没有在后端的响应中传输，我不知道为什么。

这是我目前在 Express 后端应用程序中拥有的会话选项：

app.use(
  session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
    store: MongoStore.create({ mongoUrl: process.env.MONGODB_URI }),
    cookie: {
      secure: true,
      sameSite: "none",
      httpOnly: true,
      expires: 24 * 60*60*1000
    }
  })
);

我尝试四处寻找解决方案，并弄乱了许多选项，包括更改

secure

、更改

httpOnly

、将

sameSite

设置为 false 和无、添加指向前端 URL 的

domain

和另一个用于后端 URL，删除了我安装的所有安全包，例如头盔和速率限制器，但似乎没有任何效果。

我还将凭据的访问控制标头设置为 true：

app.use((req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", process.env.DOMAIN_URL);
  res.setHeader("Access-Control-Allow-Credentials", true);
  res.setHeader("Access-Control-Allow-Headers", "Content-Type");
  res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE");
  next();
});

对于我的所有请求，我都使用

fetch

。我可以遇到与我类似的问题，但没有得到解答：浏览器未从跨域服务器保存会话 cookie

任何帮助或建议将不胜感激！

Answer 1

解决了。问题出在信任代理上。由于我运行多个域服务器，因此后端位于反向代理后面。通过启用信任代理，我的后端应用程序将了解它位于代理后面，并且 X-Forwarded- 标头字段可能是可信的。为了启用它，我在后端应用程序中添加了以下代码：

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

Answer 2

1. 转到 urlbar 中 URL 左侧的那个小锁图标。
2. 选择

   Cookies and site data

   。
3. 取消选中

   Block third-party cookies

   选项。

Answer 3

当我取消选中阻止第三方 cookies 选项时。确实有效，但是如何彻底修复呢？因为它不能在任何其他浏览器上工作