Express后端在使用CORS和Cookie-Parser接收子域名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时，其中origin为：

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

但是在测试时，当我使用子域origin时，如下所示：

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

前端的CORS没有错误，并且在前端成功创建了cookie。但是当我尝试使用这个CORS设置来访问cookie时，我却没有收到任何cookie。但是使用相同的方法和CORS设置到简单的localhost时，我可以正常获取所有的cookie，没有任何问题。

console.log(req.cookies);

P.S： 当我在localhost上并且origin是localhost时， 并且我记录cookie， 我可以获取所有的前端cookie，而不仅仅是我在后端创建的那个 但是 当我在子域的origin上时，我在后端甚至都没有收到一个cookie， 既没有我创建的，也没有来自前端的任何一个

Answer 1

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

在开发环境中，secure属性最好设置为false。

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

检查你的系统hosts文件：

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