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

Posted 2023-02-27

【中文标题】如何使用 fetch() 和 React Native 处理 set-cookie 标头

【英文标题】：How to handle set-cookie headers with fetch() and React Native

【发布时间】：2018-09-16 16:26:00

【问题描述】：

我有基于 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 持久化的东西吗？如何在没有插件/库的情况下处理 cookie 数据并将其保存到 AsyncStorage？

【参考方案1】：

解决方案：

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

注意事项：

我知道这是多年以后的事了，但我发现罪魁祸首是 React Native Debugger。如果您启用了 Network Inspect，它会删除 set-cookie 标头，留下未定义的标题。

请注意，我使用的是 Axios 版本 0.20.0，并在我的 POST 配置中将 withCredentials 设置为 true，在 React Native 0.63.3 上使用 React Native Debugger 0.11.5。我知道这不是 fetch，但很可能是那些年前让你感到困扰的东西。当您开始使用 RND 进行检查时，您的 set-cookie 就消失了。

现在的解决方案是禁用 Network Inspect，然后您将再次获得 set-cookie。

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

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

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

【讨论】：

这在我以为我碰壁后救了我。如此明显但不是......

【参考方案2】：

见here

使用获取请求发送凭据

您是否要使用凭据发出提取请求，例如 cookie，您应该将请求的凭据设置为“包含”。

fetch(url, 
  credentials: 'include'
)

【讨论】：

它没有帮助 :( 我的响应标题中仍然没有 cookie。我只在第一次调用时使用它。

同样的问题，你有没有解决这个问题？