I am using an Axios interceptor in my React application to add an Authorization header. This works fine on desktop browsers (Chrome), however on mobile browsers (iOS, Safari and Chrome) the Authorization header is not set.
I am using Axios (0.23.0).
Here is the Axios code:
// api.js
export const ProtectedAPI = axios.create({
baseURL: `${REACT_APP_API_URL}/`,
});
ProtectedAPI.interceptors.request.use(
(config) => {
const currentUser = JSON.parse(window.localStorage.getItem("current_user"));
config.headers = {
Authorization: "Bearer " + currentUser.accessToken,
};
return config;
},
(error) => {
return Promise.reject(error);
}
);
Here is how it is called in my component:
// myComponent/index.js
const accountRes = await ProtectedAPI.get(
"account/get_account"
);
These are the headers received by the API from mobile browsers:
{
Connection: "upgrade",
Host: "<MY_API_ENDPOINT>",
"X-Real-Ip": "<IP_REMOVED_BY_ME>",
"X-Forwarded-For": "<IP_REMOVED_BY_ME>",
Accept: "*/*",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "en-US,en;q=0.9",
Origin: "<MY_ORIGIN>",
"User-Agent":
"Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/94.0.4606.76 Mobile/15E148 Safari/604.1",
"X-Forwarded-Port": "443",
"X-Forwarded-Proto": "https",
};
These are the headers received by the API from desktop browsers:
{
Connection: "upgrade",
Host: "<MY_API_ENDPOINT>",
"X-Real-Ip": "<IP_REMOVED_BY_ME>",
"X-Forwarded-For": "<IP_REMOVED_BY_ME>",
Accept: "*/*",
"Accept-Encoding": "gzip, deflate, br",
"Accept-Language": "en-US,en;q=0.9",
Authorization:
"Bearer <MY_ACCESS_TOKEN>",
Dnt: "1",
Origin: "<MY_ORIGIN>",
"Sec-Ch-Ua":
'"Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"',
"Sec-Ch-Ua-Mobile": "?0",
"Sec-Ch-Ua-Platform": '"Windows"',
"Sec-Fetch-Dest": "empty",
"Sec-Fetch-Mode": "cors",
"Sec-Fetch-Site": "same-site",
"User-Agent":
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36",
"X-Forwarded-Port": "443",
"X-Forwarded-Proto": "https",
};
As you can see, the desktop browser request includes the Authorization header and token, while the mobile request does not. Is there something different about the way Axios interceptors work on mobile browsers?