Request failed with status code 401 for React Native Expo on IOS only but working everywhere else

Question

I am working with a React Native with the Expo SDK. im having issues with IOS Simulator when Fetching ApI (GET Request)

i Have tried PostMan and on Android it is working very fine but on IOS it just throws

Running application on iPhone 11.

Request failed with status code 401
- node_modules/axios/lib/core/createError.js:15:17 in createError
- node_modules/axios/lib/core/settle.js:16:9 in settle
- node_modules/axios/lib/adapters/xhr.js:52:6 in handleLoad
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:567:4 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:389:6 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:425:19 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:112:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:373:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:111:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

below is my function for GET Request on

const token = await AsyncStorage.getItem("userToken");
const auth_token = 'Token ' + token
axios
      .get("http://127.0.0.1:8001/api/user-info", {
        headers: {
        "Authorization": auth_token,
      }
    })
      .then(function (response) {
        console.log(response)
        const groupData = {};
        groupData["groupName"] = response.data.user.group;
        groupData["userName"] = response.data.user.username;
        groupData["jobTitle"] = response.data.user.job_title;
        console.log(groupData);
        groupName(groupData);
      })
      .catch(function (error) {
        console.log(error)
      });

also i did debug request im getting on fetch , i somehow know that Authorization is not there in request.headers

here's my request.headers but Authorization is not there

{'Accept': 'application/json, text/plain, */*', 'Accept-Encoding': 'gzip, deflate', 'Host': '127.0.0.1:8001', 'Content-Type': 'application/json;charset=utf-8', 'Content-Length': '47', 'Connection': 'keep-alive', 'Accept-Language': 'en-us', 'User-Agent': 'Expo/2.16.0.108985 CFNetwork/1128.0.1 Darwin/19.6.0'}

Also 1 more thing i want to add is , Login post API is working fine with IPhone Simulator but not other GET Request

Answer 1

401 means that the auth is not working properly (from react-native). Please console log the token you're using in your phone and try using it in Postman, I'm pretty sure the console log is going to be null. Your headers also don't show any sort of authorization token being passed.

also, you have:

auth_token = 'Token ' + token

should be: const auth_token = 'Token ' + token;

Answer 2

Had the same problem (iOS only), solution was that my trailing slash in the url was missing and the redirect somehow made the authorization header get lost. So adding trailing slash -> everything fine.