【发布时间】：2022-04-10 21:05:10
【问题描述】：
由于客户端托管在 Netlify 而服务器托管在 Heroku，我遇到了无法在浏览器中设置 cookie 的问题。它在本地主机上运行良好，所以它似乎与它现在跨域有关。
阅读了多篇关于此的帖子，似乎它可能与 cors 或我如何设置 cookie 开始有关。
我在某处读到，在设置 cookie 时添加 secure: true 和 sameSite: "none" 可能会有所帮助，所以我添加了它们，但没有帮助。我也试过在设置时将domain添加到cookie中，但不幸的是它也没有帮助。
我正在使用 Chrome 并已将设置从使用 icognito 阻止第三方 cookie 更改为允许所有 cookie，因为我已经读到这有时可能是一个问题。然而它也没有产生任何新的结果。
我还读到它可能出于某种原因需要代理，或者可以通过在 Heroku 上托管客户端和服务器来解决。如果可能，我宁愿不必做任何这些事情，但欢迎提出任何想法。
服务器端，在 Heroku 上托管 Node js（express）：
const express = require("express");
const app = express();
require("dotenv").config();
const cors = require("cors");
const mysql = require("mysql");
const jwt = require("jsonwebtoken");
const cookieParser = require("cookie-parser");
// port for heroku if needed
const PORT = 3001;
// app objects instantiated on creation of the express server
app.use(
cors({
origin: [
"https://examples.netlify.app",
"http://localhost:3000",
],
methods: ["GET", "POST", "DELETE"],
credentials: true,
})
);
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cookieParser());
/*
* Handel user login
*/
app.post("/sign-in", (req, res) => {
const { email, password } = req.body;
sqlSelectAllUsers = "SELECT * FROM user_db WHERE email = ?";
db.query(sqlSelectAllUsers, [email], (err, user) => {
if (err) {
res.send({ err: err });
}
if (user && user.length > 0) {
// given the email check if the password is correct
bcrypt.compare(password, user[0].password, (err, compareUser) => {
if (compareUser) {
//req.session.email = user;
// create access token
const accessToken = createAccessToken(user[0]);
const refreshToken = createRefreshToken(user[0]);
// create cookie and store it in users browser
res.cookie("access-token", accessToken, {
maxAge: 1000 * 60 * 30, // 30 min
httpOnly: true, // hinder doing document.cookies as it will be httpOnly which will make it more safe
secure: true,
domain: "https://examples.netlify.app/",
sameSite: "none",
});
res.cookie("refresh-token", refreshToken, {
maxAge: 2.63e9, // approx 1 month
httpOnly: true,
secure: true,
domain: "https://examples.netlify.app/",
sameSite: "none",
});
// update refresh token in database
const sqlUpdateToken =
"UPDATE user_db SET refresh_token = ? WHERE email = ?";
db.query(
sqlUpdateToken,
[refreshToken, user[0].email],
(err, result) => {
if (err) {
res.send(err);
}
res.sendStatus(200);
}
);
} else {
res.send({ message: "Wrong email or password" });
}
});
} else {
res.send({ message: "Wrong email or password" });
}
});
});
app.listen(process.env.PORT || PORT, () => {
console.log(`Server running on port ${PORT}`);
});
客户端在 Netlify 上托管 React：
export default function SignIn() {
const history = useHistory();
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
axios
.post(
"https://example.herokuapp.com/sign-in",
{
email: data.get("email"),
password: data.get("password"),
},
{ withCredentials: "true" }
)
.then((response) => {
//check if good response then give user a token for valid login
if (response.data === "OK") {
history.push("/");
history.go(0);
}
});
};
}
【问题讨论】：
标签： node.js reactjs express heroku cookies