如何使用 fetch() 和 React Native 处理 set-cookie 标头

Question

我有基于 cookie 的身份验证和会话管理的 Spring Boot 应用程序。对于第一个请求，我收到 cookie 名称和会话哈希作为值。

另一方面，我有用 Expo 包装的 React Native 应用程序。对于有史以来的第一个请求，我可以从 fetch() 请求中获取这个“set-cookie”标头。然后，即使在重新启动应用程序后，我也无法获得此标头。

我用 React Native Debugger 和这行代码调试了它：

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

我可以在调试器的网络选项卡上看到我的 XHR 请求。清除所有 cookie 后，每次我在请求的预览中正确接收 set-cookie 标头时。但是我用 fetch(...).then(response => response.headers) 看不到它。

为什么？这是我的饼干持久化的东西吗？如何在没有插件/库的情况下处理 cookie 数据并将其保存到 AsyncStorage？

Answer 1

解决方案：

如果您在 React Native Debugger 中启用了Network Inspect，请将其关闭。右键单击 Redux 区域的任意位置，然后按Disable Network Inspect。

笔记：

我知道这是很多年后的事了，但我发现罪魁祸首是 React Native Debugger。如果您启用了网络检查，它会剥离set-cookie标头，留下未定义的内容。

请注意，我使用的是 Axios 版本 0.20.0，并withCredentials在带有 React Native Debugger 0.11.5 的 React Native 0.63.3 上的 POST 配置中设置为 true。我知道这并不奇怪，但这很可能是多年前困扰你的问题。set-cookie当你开始与 RND 一起检查时，你就消失了。

现在的解决方案是禁用 Network Inspect，然后您就会set-cookie再次遇到问题。

2019 年 React Native Debugger 中出现了一个 bug，作者提到这是一个不容易克服的限制。

如果您有兴趣，请在此处阅读更多内容：

https://github.com/jhen0409/react-native-debugger/issues/340#issuecomment-514395195

Answer 2

看这里

通过获取请求发送凭证

如果您想使用 cookie 等凭据发出获取请求，则应将请求的凭据设置为“include”。

fetch(url, {
  credentials: 'include'
})