16

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).

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.

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

Network Responses and api call

Makai
  • 449
  • 4
  • 8
  • Without any actual details (code that shows your route handling, django config, browser console error details, network tab details, etc) I'm going to simply guess that you're rejecting whatever preflighting Safari does, so check what the browser console and network tabs say, and update your post with some more information. – Mike 'Pomax' Kamermans May 24 '18 at 18:04
  • 401 is Unauthorized. As you said `if we store a token in our authentication header no 401 status is given (it works)`. Could this be a hint? – Tuğberk Kaan Duman May 24 '18 at 18:04

1 Answers1

28

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.

Makai
  • 449
  • 4
  • 8
  • 4
    Same problem here but I was receiving a 401 status code instead 301/304. Can't believe it! Safari and iPhone only gives me joy :( – André Duarte Feb 20 '20 at 17:12
  • This save my life! I just can't understand why it was returning 401 on iOS when in everywhere else it was working! I thought it was something about iOS not storing Cookies or something like that. End result, I add a forward slash in the end of all urls that already didn't had one. Now everything is working. My setup is the same: DRF + React, authentication via JWT. – Maximiliano Guerra Oct 08 '20 at 18:46
  • 1
    Wow, this was super helpful. I hadn't noticed that chrome was doing the heavy-lifting. Here's why it was failing on safari, for me, this is the url to fetch records: `https://forexample.com/users?is_myfriend=true` and based on your answer, when I added the trailing slash, like `.../users/?...` it then worked fine. Thank you. – MwamiTovi Jun 18 '21 at 11:04