如何使用CORS來允許設定Cookie

Question

我已經查看了其他相關的帖子，但都對我沒有用。我在客戶端使用vue，在伺服器端使用node。

我嘗試了其他帖子中建議的使用cors庫的方法，但沒有成功。 人們可能會認為下面的程式碼可以讓我從客戶端的localhost:8080發送請求到伺服器的localhost:3000，但所有的請求都失敗了。

const cors = require("cors");
if (process.env.ENV !== "prod") {
  let corsOptions = {
    origin: ["http://localhost:8080"],
    credentials: true,
    optionsSuccessStatus: 200,
  };
  app.use(cors(corsOptions));
}

這是我用來設定cookie的控制器。

router.route("/login").post(async (req, res) => {
  //Authenticate users
  const user = await Users.findOne({ where: { email: req.body.email } });

  if (user == null) {
    return res.status(400).send("找不到使用者！");
  }
  try {
    if (await bcrypt.compare(req.body.password, user.password)) {
      const userInfo = {
        username: user.username,
        email: user.email,
        age: user.age,
      };
      const accessToken = generateAccessToken(userInfo);

      const refreshToken = jwt.sign(userInfo, process.env.REFRESH_TOKEN_SECRET);
      res.cookie("token", accessToken, {
        maxAge: 300000,
        secure: true,
        httpOnly: true,
        sameSite: "none",
      });
      res.status(200).send("登入成功！");
    } else {
      res.send("郵箱或密碼不正確！");
    }
  } catch {
    res.status(500).send();
  }
});

這個網站上的每個答案基本上都會回到app.use(cors)，但出於某種原因，對我不起作用。

Answer 1

這可能是因為對於跨網域的cookie，您設定了{sameSite：true}和{secure：true}，但在您的範例中，您是在http://localhost上進行的，因此不會設定任何cookie。請參考以下連結以取得要求。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#samesitenone_requires_secure

也要設定正確的頭部，例如Access-Control-Allow-Credentials，Access-Control-Allow-Origin，Access-Control-Allow-Headers

您可以使用mkcert來參考在本機上進行安全連線。

我還建議在前端和後端使用相同的頂級網域，並使用子網域。

這裡還要注意的一點是，如果域名中有端口，我認為Chrome不會設置cookie，請嘗試一下。

Answer 2

我成功解決了這個問題，以便後來的人可以找到答案。我將cookieparser的聲明移到了初始化sequelize連接的位置之前。我還在我的axios post請求中新增了withCredentials選項。透過這兩個步驟，我的cookie現在都已正確設定並且可以存取。

const express = require("express");
require("dotenv").config();
const cors = require("cors");
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const cookieParser = require("cookie-parser");
app.use(cookieParser());
const port = process.env.PORT || 8080;
const lib = require("./lib"); //这是所有自定义函数
const sql = require("./database");

onSubmit() {
        let loginInfo = {
          email: email.value,
          password: password.value,
        };
        axios
          .post("http://localhost:3000/user/login", loginInfo, {
            withCredentials: true,
          })
          .then(() =>
            $q.notify({
              color: "green-4",
              textColor: "white",
              icon: "cloud_done",
              message: "帐户创建成功！",
            })
          )
          .catch(() =>
            $q.notify({
              color: "red-5",
              textColor: "white",
              icon: "warning",
              message: "电子邮件或用户名已被使用！",
            })
          );
      },