如何使用 React 获取 cookie 数据？

Question

我有一个 MERN + Passport.js 应用程序，它使用 fetch 调用我的 express API 以检索存储在 cookie 中的数据。我的 React 前端路由到 localhost:3000，我的后端路由到 localhost:3001。我的 cookie 没有被保存，因此我的会话没有在我的浏览器中持续存在。这不是 express-sessions 或护照中间件的问题，因为当我使用 POSTMAN 执行对我的 API 的必要调用时，cookie 被存储并且会话持续存在。 只有当我尝试将这些信息通过/传递到我的前端时才会出现问题。我被难住了一段时间，似乎无法在任何地方找到答案。

这是我用来保存 cookie 的行：

handleLogin(event) {
        event.preventDefault();
        fetch("http://localhost:3001/users/login", {
            // credentials: 'include',
            credentials: 'same-origin',
            method: "post",
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },   
        body: JSON.stringify({
            username: this.state.username,
            password: this.state.password
            })
        })
        // .then( (response) => response.json())
        .then( (response )=> {
            if(response.message){
                alert(response.message);
            }
        })

正确调用我的 API，记录当前会话、用户数据和 cookie。

刷新并发出另一个请求后，我丢失了 cookie（我认为它从一开始就没有正确存储）和所有会话数据。

这是我在导航到新页面时发出的获取请求：

componentDidMount(){
        var current_user = "";
        fetch("http://localhost:3001/users/", {
            // credentials: 'include',
            credentials: 'same-origin',
            method: "get",
            headers: {
                'Accept':'application/json',
                'Content-Type': 'application/json'
            }        
        })
        // .then( (response)=> response.json())
        .then( (response)=> {
            if(response.user){
                current_user = response.user;
                this.setState({
                    user: current_user
                }), ()=> console.log(response);
            }
        })
    }

作为响应，我得到一个未定义的用户并且没有其他响应，并且 cookie 从未存储在我的浏览器中。但同样，如果我在 POSTMAN 中执行此操作，严格执行 POST 请求，然后执行 GET 请求，则会返回正确的用户数据，并且 cookie 也会显示在 POSTMAN 中。 关于为什么 fetch 没有将 cookie 信息传递回我的前端的任何想法？我已经尝试了两个凭据：'include' 和凭据：same-origin。

谢谢！

Answer 1

似乎问题或至少部分问题在于您对same-origin 的使用。来自Mozilla docs（斜体是我自己的）：

省略：从不发送 cookie。

same-origin：发送用户凭据（cookies、基本 http auth 等）。如果 URL 与调用脚本同源。这是默认值。

包括：始终发送用户凭据（cookie、基本 http 身份验证等），即使是跨域调用。

“同源”的定义不包括different ports。

如果您将 same-origin 更改为 include，fetch 应该会开始正确管理您的 cookie。

如果不是 - 您确定 cookie “从未存储在浏览器中”吗？使用 Chrome，您可以查看chrome://settings/siteData。