在 React 中使用 Safari 而不是 Chrome 接收 401 状态

Posted 2023-03-04

【中文标题】在 React 中使用 Safari 而不是 Chrome 接收 401 状态

【英文标题】：Receiving 401 status with Safari not Chrome in React

【发布时间】：2018-11-04 01:05:29

【问题描述】：

我们面临的问题如下：当使用 Safari 而不是 Chrome 作为浏览器时，我们在 get api 调用中收到 401 状态。我们使用的技术是 React 和 Django Rest Framework。在 React 中，我们也使用 axios。同样，当我们使用 Chrome 作为浏览器时一切都很好（没有给出 401 错误并且身份验证似乎很好），但是当我们切换到 Safari 时，它就不起作用了。我们还应该注意，在使用 Postman 进行测试时，如果我们在身份验证标头中存储令牌，则不会给出 401 状态（它有效）。

为了尝试解决这个问题，我们在 Django 后端尝试了不同类型的身份验证类，并确保 CORS 在我们的设置中。我们还确保我们遵循 react 组件生命周期以正确安装，并包含每个 api 调用所需的适当信息。我们认为这是客户端问题。

请参阅下图，了解我们看到的网络请求/响应以及我们的 api 调用的简要说明。

Network Responses and api call

【问题讨论】：

没有任何实际细节（显示你的路由处理、django 配置、浏览器控制台错误细节、网络选项卡细节等的代码）我只是猜测你拒绝任何预检 Safari ，因此请检查浏览器控制台和网络标签的内容，并使用更多信息更新您的帖子。

401 未经授权。正如你所说的if we store a token in our authentication header no 401 status is given (it works)。这可能是一个提示吗？

【参考方案1】：

所以我们的问题的根源是我们没有用正斜杠结束我们的一个 api url，导致 301 然后是 304。Chrome 能够毫无问题地自动更正，但是 Safari、IE、而火狐不能。

【讨论】：

这里有同样的问题，但我收到的是 401 状态码而不是 301/304。不敢相信！ Safari 和 iPhone 只会给我带来快乐 :(

这救了我的命！我只是不明白为什么它在其他任何地方都在工作时在 iOS 上返回 401！我认为这是因为 iOS 没有存储 Cookie 或类似的东西。最终结果，我在所有已经没有的网址的末尾添加了一个正斜杠。现在一切正常。我的设置是一样的：DRF + React，通过 JWT 进行身份验证。

哇，这非常有帮助。我没有注意到铬在做繁重的工作。这就是它在 safari 上失败的原因，对我来说，这是获取记录的 url：https://forexample.com/users?is_myfriend=true 并且根据你的回答，当我添加尾部斜杠时，比如.../users/?...，它就可以正常工作了。谢谢。