在React中使用Safari而不是Chrome接收401状态 [英] Receiving 401 status with Safari not Chrome in React

问题描述

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

The problem we are facing is the following: When using Safari as a browser, rather than Chrome, we receive a 401 status on a get api call. The technologies we are using are React and Django Rest Framework. In React we are also using axios. Again, all is fine when we use Chrome as our browser (no 401 error is given and authentication seems to be fine), but when we switch to Safari, it does not work. We should also note that when testing with Postman, if we store a token in our authentication header no 401 status is given (it works).

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

To try and solve this, we have tried different types of authentication classes in our Django backend, and ensured CORS was in our settings. We also ensured that we followed the react component lifecycle for proper mounting, and included the appropriate info necessary for each api call. We believe this to be a client side issue.

请参见下图，以简要描述我们看到的网络请求/响应以及api调用。

Please see the image below for a brief description of network requests / responses we see, and our api call.

网络响应和api调用

推荐答案

因此，我们发现问题的根源在于，我们未在其中一个api URL处加正斜杠，导致301和304。Chrome可以自动更正，而Safari，IE和Firefox无法。

So it turns out the root of our problem was that we did not end one of our api urls with a forward slash, resulting in a 301 then a 304. Chrome was able to autocorrect without an issue, but Safari, IE, and firefox cannot.

这篇关于在React中使用Safari而不是Chrome接收401状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！