3

I attach on every outgoing request an Authorization header whose value is 'Bearer {access_token}' with the following command : window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('access_token');

This works fine everywhere except on iOS where the header is not attached to the request. I also tried to attach it on a single request, and same issue. The header is not present in the request and the server returns a 401 Unauthorized error.

The bug happens whatever the browser is on iOS : Safari, Chrome, Firefox. It is really specific to iOS (my version is 11.3.1). No problem on Android or on Desktop (MacOS, Windows). I made some debugging with the iOS Simulator (where the problem also happens) : there is an item named access_token in the localStorage so the problem is not related to that.

What is happening??

thanks

Maxime Freschard
  • 1,066
  • 2
  • 15
  • 26

1 Answers1

0

As you mentioned, this bug seems to happen only on iOS/Safari. We're also facing this issue with axios in our React Native app.

It happens only with GET requests (authorization token gets sent alright with POST and PUT requests).

So you have two options:

  1. Use a different header key, e.g. Authorization-Fake-X as suggested here.
  2. Change the type of your requests (e.g. POST or PUT) if this issue occurs only with GET requests. This is an ugly option because you'll break the REST API behaviour.

Update:

The issue seems to have been fixed in October 2021, according to this SO answer. Still, we have to fix it for people using older versions of Safari and iOS.

Sufian
  • 6,405
  • 16
  • 66
  • 120