javascript - 我如何使用 React 获取 cookie 数据？

Question

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

这是我用来保存 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，它记录了当前 session 、用户数据和 cookie。

刷新并发出另一个请求后，我丢失了 cookie(我认为它从来没有正确存储在第一位)和所有 session 数据。

这是我每次导航到新页面时发出的获取请求:

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' 和凭据:同源。

谢谢!

Answer 1

似乎问题或至少部分问题是您对 same-origin 的使用。来自 Mozilla docs (我自己的斜体):

omit: Never send cookies.

same-origin: Send user credentials (cookies, basic http auth, etc..) if the URL is on the same origin as the calling script. This is the default value.

include: Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.

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

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

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