Cookie 不存储在移动浏览器上，但在桌面上运行

Question

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

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

我在发送 cookie 和同一个网站等方面搞砸了，说实话，我不太擅长后端的东西。

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

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 mobile也有类似的设置，旨在防止广告商跟踪。

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