cookie不存储在移动浏览器上，但在桌面上工作

Question

我有一个ExpressJS应用程序，我托管在heroku和前端反应应用程序，我托管在netflix上。当用户登录并且他们的详细信息正确时，他们会被重定向到显示与他们相关的内容等的主页。当用户登陆主页(已登录)时，将向后端发送一个调用，以验证他们成功登录时提供给他们的令牌。有两个令牌:一个访问令牌和一个刷新令牌，出于安全目的，它们都作为httponly cookie发送。由于后端与前端在不同的域上，我在express后端使用凭据设置为true，在前端使用axios.defaults.withCredentials = true。

这在桌面浏览器上运行良好，cookie设置正确等。简而言之，用户可以看到为他们量身定制的内容，一切都很好。在移动浏览器上，当我登录时，我可以在Heroku中看到，成功登录桌面后端在控制台登录的令牌是未定义的。这让我相信cookie在移动浏览器上没有被正确设置。我说移动浏览器是复数，因为这种行为在chrome mobile, safari等上是一致的。

我在发送cookie和同一站点等方面搞砸了，说实话，我对后端东西不太好。

是来自登录页面的代码，它将用户重定向到主页，根据用户是否登录，主页本身会呈现登录版本或标准主页。请注意，signUserInOut来自use上下文，但下面是相关代码。

const navigate = useNavigate();
const sendToLandingPage = () => {
navigate("/");
};
const sendInformationToApi = async () => {
const infoSent = await axios
.post("https://BACKENDURLHEREREPLACED.COM", {
email: `${usersEmail}`,
password: `${usersPass}`,
})
.then((data) => {
if (data.data.msg === "SIGN IN SUCCESSFUL") {
sendToLandingPage();
localStorage.setItem("USERISLOGGEDIN", true);
signUserInOut(true);
}
});
}

在这里我们有相关的主页代码，用户成功登录后被重定向到。

useEffect(() => {
async function getData() {
setLoading(true);
let checkToken = await checkIfTokenIsValid();
if (checkToken === "USER CAN PASS") {
const data = await axios.get("https://BACKENDCODEETC.COM");
setLoading(false);
}
}
getData();
}, []);

这里我们有来自后端登录路由的相关代码(从cookie中提取令牌)

res
.cookie("token", token, {
httpOnly: true,
sameSite: "None",
secure: true,
})
.status(200);
res
.cookie("refreshToken", refreshToken, {
httpOnly: true,
sameSite: "None",
secure: true,
})
.status(200);

所有这些都在桌面浏览器上运行良好，但在移动浏览器上就不行了。我尝试了各种cookie设置等，但似乎没有在移动设备上工作。

Answer 1

我有一个类似的问题，经过多次故障排除后发现是在iPhone的safari浏览器设置中"防止跨站点跟踪"。关闭这个选项可以让我的网站正常工作。我相信chrome移动版也有类似的设置，旨在防止广告商跟踪。

我最终获得了一个自定义域名，并将vercel应用程序放在domain.com上，并将heroku后端放在server.domain.com上。我相信这使得cookie看起来不会是"跨站点"，所以即使启用了防止跨站点跟踪，它们也可以工作。

Answer 2

把你的代码改成[secure = false]