Question

我有一个MERN + Passport.js应用程序，该应用程序使用fetch调用我的express API以便检索存储在cookie中的数据。我的React前端路由到localhost：3000，后端路由到localhost：3001。我的cookie没有被保存，因此我的会话未在浏览器中持久保存。 Express会话或护照中间件不是问题，因为当我使用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，该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中。关于为什么提取不将cookie信息传递回我的前端的任何想法？我已经尝试过两个凭据：“ include”和凭据：同源。

谢谢！

Answer 1

问题似乎或至少是部分原因是您使用same-origin。摘自Mozilla docs（是我自己的）：

忽略：从不发送Cookie。

相同来源：如果URL与调用脚本的起源相同，则发送用户凭据（cookie，基本的HTTP身份验证等）。这是默认值。

包括：即使对于跨域调用，也始终发送用户凭据（cookie，基本的http auth等）。

“原产地”的定义不包括different ports。

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

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

如何使用React提取Cookie数据？

1 个答案: