使用 CORS 和 Cookie-Parser 在 Express 后端接收子域 Cookie 时出现问题

Question

我目前正在开发一个 MERN（MongoDB、Express、React、Node.js）应用程序，在该应用程序中，我遇到了从 Express 后端的子域接收 cookie 的问题。我已经设置了 CORS 和 cookie 处理，虽然在使用简单的 localhost 源时一切正常，但我在子域方面遇到了困难。

以下是我已采取的步骤和我面临的问题的摘要：

登录时设置 cookie :

res.cookie("token", token, {
    httpOnly: true,
    sameSite: "none",
    path: "/",
    secure: true,
  });

当我尝试使用我的 cors 设置获取此 cookie 时，原点是：

app.use(
  cors({
    origin: "http://localhost:3000", 
    credentials: true,
  })
);

但是当我使用子域来源时进行测试：

app.use(
  cors({
    origin: "http://binbros.localhost:3000",
    credentials: true,
  })
);

前端 Cors 没有错误，并且 cookie 在前端创建成功 但是当我尝试使用此 cor 设置访问 cookie 时，我没有收到任何 cookie 但是使用相同的方法和简单的本地主机的cors设置，我得到了所有的cookie，没有任何问题

console.log(req.cookies);

附言： 当我在本地主机并且来源是 loclhost 时 我记录cookie 我得到了所有前端cookie，而不仅仅是我在后端创建的cookie 但 当我在子域的起源时，我什至没有在后端获得 1 个 cookie， 不是我从前端创建的，也不是任何一个

Answer 1

在 subdomain.localhost 等开发环境中使用子域时，由于浏览器安全策略，可能会遇到其他挑战。浏览器通常将不同的子域视为单独的来源，这可能会影响 cookie 和 CORS 的行为。

开发环境中的

secure属性最好是false。

res.cookie("token", token, {
    httpOnly: true,
    sameSite: "none",
    path: "/",
    secure: false,
  });

检查您的系统主机：

127.0.0.1 binbros.localhost

在前端检查是否从 binbros.localhost 域调用 api， 并结束检查Access-Control-Allow-Credentials

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials