如何在 React 中访问 set-cookie 的值？

Question

我一直在使用Traccar API 和 React 开展一个项目。

我的问题是我想保存 set-cookie 响应头的值，以将其存储在浏览器的 cookie 中。

我想这样做是因为 Firefox 或 Chrome 都没有在浏览器上设置 cookie。

但是在两个浏览器上我得到相同的响应头。

这是我的函数，如您所见，我尝试使用 response.headers.get() 获取 set-cookie 的值

    const login = async () => {

        setLoading(true);
        const myHeaders = new Headers();

        myHeaders.append("Authorization", "Basic Og==");
        myHeaders.append("Content-Type", "application/x-www-form-urlencoded");


        var urlencoded = new URLSearchParams();
        urlencoded.append("email", user.email);
        urlencoded.append("password", user.password);

        var requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: urlencoded,
            credentials: 'include',
            redirect: 'manual',
        }

        trackPromise(
            fetch("http://x.x.x.x:7082/api/session", requestOptions)
                .then((response) => {
                    if (response.ok) {
                        console.log('Cookie: '+response.headers.get('set-cookie'))
                        redirect();
                    } else {
                        alert('There was a problem');
                    }
                })
                .catch(error => console.log('error', error))
        );
    }

但是每次调用请求，结果都是一样的。

另外，我尝试修改credentials 标头并使用credentials: include、credentials: same-origin 和credentials: omit，但仍然没有运气。

我被这个问题困扰了一个多星期，我注意到的一件事是在 Postman 中测试 API 方法时，JSESSIONID 值来自 set-cookie，总是被使用，这个值作为响应头返回，但在代码片段中，也被设置为请求头，这是有道理的，因为使用 Postman 的 API 上的每个方法都使用它作为一个请求标头。

那么，如何得到这个值呢？

Answer 1

类似fetch: Getting cookies from fetch response

检查您可以阅读哪些标题：

fetch(URL, { credentials: 'include' })
 .then((response) => {
  
  for(let entry of response.headers.entries()) {
    console.log('header', entry);
  }
});

如果 cookie 已设置，请尝试以 document.cookies 访问它们。 （它不适用于标记为 httpOnly 的 cookie）