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