如何使用CORS來允許設定Cookie
P粉765684602
2023-08-29 17:26:51
<p>我已經查看了其他相關的帖子，但都對我沒有用。我在客戶端使用vue，在伺服器端使用node。 </p>
<p>我嘗試了其他帖子中建議的使用cors庫的方法，但沒有成功。
人們可能會認為下面的程式碼可以讓我從客戶端的localhost:8080發送請求到伺服器的localhost:3000，但所有的請求都失敗了。 </p>
<pre class="brush:php;toolbar:false;">const cors = require("cors");
if (process.env.ENV !== "prod") {
let corsOptions = {
origin: ["http://localhost:8080"],
credentials: true,
optionsSuccessStatus: 200,
};
app.use(cors(corsOptions));
}</pre>
<p>這是我用來設定cookie的控制器。 </p>
<pre class="brush:php;toolbar:false;">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();
}
});</pre>
<p>這個網站上的每個答案基本上都會回到app.use(cors)，但出於某種原因，對我不起作用。 </p>
這可能是因為對於跨網域的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，請嘗試一下。
我成功解決了這個問題，以便後來的人可以找到答案。我將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: "电子邮件或用户名已被使用！", }) ); },