Javascript 如何使用React获取cookie数据？

我有一个MERN+Passport.js应用程序，它使用fetch调用我的express API，以检索存储在cookie中的数据。我的React前端路由到localhost:3000，后端路由到localhost:3001。我的cookies未保存，因此我的会话未在浏览器中持久化。这不是express会话或passport中间件的问题，因为当我使用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（我认为它一开始就没有正确存储）和所有会话数据

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

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信息传递回我的前端吗？我尝试了两种凭据：“包括”和凭据：同一来源

---

谢谢大家!

问题似乎在于，或者至少部分原因在于，您使用的是相同来源的

。来自（我自己的斜体）：

忽略：从不发送cookies

同一来源：如果URL与调用脚本位于同一来源，则发送用户凭据（cookie、基本http验证等）。这是默认值

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

“同一原产地”的定义不包括：

如果您将

同源

更改为

包含

，

获取

应开始正确管理cookie

---

如果没有-您是否确定cookie“从未存储在浏览器中”？使用Chrome，您可以检查

chrome://settings/siteData

我尝试使用

包含

而不是

同源

，但是当我将凭证切换到

包含

时，我甚至没有得到输出的console.log（这很奇怪）。是的，通常我会检查chrome的开发者窗口，进入“应用程序”，然后前往“存储”，检查我的cookie是否在那里——而它们不在我的前端（localhost:3000）。我也没有获得本地主机3001（我的后端）的cookie。为了澄清：您已经尝试在两个请求中将

相同来源更改为
包含
？结果是第一个不会抛出警报，第二个不会发出console.log？没有错误吗？啊，我一直在处理它，似乎当我将凭据设置为
include
时，我确实收到了一个错误-最初是CORS错误，说明我无法使用通配符（*）来允许前端访问后端的凭据。我已经对此进行了调试，现在我正在处理一个错误，该错误指出：
响应中“Access Control Allow Credentials”头的值为“”，当请求的凭据模式为“include”时，该值必须为“true”。
。我目前正在尝试显式地将allow credentials头设置为true。我没有-但我安装了它并使其正常工作。谢谢-解决方法是将我的凭据设置为“包括”在我的获取调用中，因为它被视为CORS请求（同一主机的不同端口上的文档是同一来源或跨来源的，这是非常冲突的）。设置之后，我必须使用Node.js CORS包设置更多的CORS选项：将我的React前端白名单并启用将“Credentials”头设置为true。