Estaba siguiendo un tutorial que me llevó a escribir instancias de Axios como esta:

 const baseURL = GuardServices.returnApiUrl(); const axiosInstance = axios.create({ baseURL: baseURL, timeout: 15000, headers: GuardServices.getHeaders() }); axiosInstance.interceptors.response.use( (response) => { return response; }, async function (error) { const originalRequest = error.config; if (typeof error.response === 'undefined') { alert("An error seems to have occurred, please refresh.\nIf problem persists please contact system admin."); return Promise.reject(error); } if ( error.response.status === 401 && originalRequest.url === baseURL + 'token/refresh/' ) { AuthServices.logoutUser() return Promise.reject(error); } if ( error.response.data.code === 'token_not_valid' && error.response.status === 401 && error.response.statusText === 'Unauthorized' ) { const refreshToken = localStorage.getItem('o$FX1HM77H3gq0AI'); if (refreshToken !== null || refreshToken !== "null") { const tokenParts = JSON.parse(atob(refreshToken.split('.')[1])); // exp date in token is expressed in seconds, while now() returns milliseconds: const now = Math.ceil(Date.now() / 1000); // console.log(tokenParts.exp); if (tokenParts.exp > now) { return axiosInstance .post('/token/refresh/', { refresh: refreshToken }) .then((response) => { GuardServices.updateHeaders(response.data) axiosInstance.defaults.headers['Authorization'] = GuardServices.getHeaders() originalRequest.headers['Authorization'] = GuardServices.getHeaders() return axiosInstance(originalRequest); }) .catch((err) => { console.log(err); }); } else { AuthServices.logoutUser() } } else { AuthServices.logoutUser() } } // specific error handling done elsewhere return Promise.reject(error); } );

Sin embargo, vino con algunos sucesos inesperados. Mis devoluciones de llamada no se ejecutan en dispositivos móviles y algunos navegadores. No me he encontrado con este problema antes y he tenido poca suerte para encontrar algo al respecto en línea.