为什么我无法在客户端检索 cookie？

Question

我目前正在开发一个聊天应用程序。前端用react搭建，部署在vercel上，后端用express搭建，部署在heroku上。因此该应用目前处于生产模式。

在登录页面上，当用户提供他们的凭据（电子邮件和密码）时，请求将发送到后端的 /login 路由，在那里检查用户提供的凭据是否正确。很简单。如果凭据不正确，则会将 500 状态代码发送回客户端，但如果它们正确，则会创建 2 个 cookie，并将它们与 200 状态代码一起发送回客户端。

这就是我挣扎的地方。当用户提供正确的信息时，2 个 cookie 会在后端创建并发送到客户端。我知道这一点是因为我可以在 chrome 开发人员工具的 Cookie 选项卡中看到 2 个 cookie。但是当我尝试使用 document.cookie 输出 cookie 的值时，它以空字符串形式出现。

前端：

    const response = await fetch(url, {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'include',
        body: JSON.stringify({email: email, password: password})
    })

后端：

    res.cookie("Cookie1", value1, {sameSite: "none", secure: true, httpOnly: false})
    res.cookie("Cookie2", value2, {sameSite: "none", secure: true, httpOnly: true})

服务器：

const cors = require('cors')

const corsOptions = { 来源：originUrl，凭据：真实，方法：['GET'、'POST'] }

app.use(cors(corsOptions))

// 我确保在声明路由之前声明以上内容

附加信息：

明确一点，当我使用 document.cookie 时，我希望只看到 Cookie1 的值。我知道我不会看到 Cookie2 的值，因为我将其 httpOnly 属性设置为 true。
我在整个 Whosebug 上搜索了这个问题，虽然我确实看到了一些 posts 问了我问的同样的问题，但那些 posts 都通过设置解决了将 httpOnly 属性设置为 false。在这种情况下情况并非如此。
我在其他 post 上注意到的与此 post 不同的另一件事是其他 post 在本地托管其前端和后端（在其本地主机上），而我将它们部署在其他地方。（不确定这是否重要。）
我不确定这是否相关，但是在执行请求并且可以在 chrome 开发人员工具中看到 cookie 后，当我重新加载页面时，这些 cookie 就会消失。（我觉得这不应该发生，但我是初学者所以我可能是错的。）

如果您还有其他想知道的，请告诉我。提前致谢。

Answer 1

我对前端了解不多，但是要在前端访问cookie，你必须使用代理。 Cookie 只能在同一端口或服务器上访问。
见this link，希望对您有所帮助！

为什么我无法在客户端检索 cookie？

Why can't I retrieve the cookies on the client side?

node.js

reactjs

express

cookies

cross-domain