'Connecting to local Express API from Expo app using physical IOS device

I've been trying to work this out for hours. I'm currently trying to learn React Native development with a Node/Express backend. I can't seem to make an Axios get request to my local API from my Expo app running on my IOS device (real device).

I have tried adding

"infoPlist": {
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true,
          "NSAllowsLocalNetworking": true,
          "NSExceptionDomains": {
            "192.168.1.4": {
              "NSExceptionAllowsInsecureHTTPLoads": true,
              "NSRequiresCertificateTransparency": false
            }
          }
        }
      }

to my app.json.

I have also tried the following:

using both localhost and my backends ipv4 address as the requests URL

creating a Self Signed SSL Key for the server, sending the certificate to the iPhone, and trusting it.

pretty much everything you can find on StackOverflow and IOS dev forums.

Here is the axios request that is made from React-Native:

const onLoginPress = () => {
    console.log("login pressed");
    axios
      .post('https://192.168.1.4:5000/api/auth/login', {email, password})
      .then(function (response) {
        //handle success
        console.log(response);
        if (response.data.success) alert(`successful login, token: ${response.data.token}`);
       
      })
      .catch(function (error) {
        //handle error 
        alert('login was not successful')
        console.log(error);
        
      })
  };

Here is the error that I get when executing the GET from the iPhone running the app in Expo GO:

Network Error
at node_modules\axios\lib\core\createError.js:16:14 in createError
at node_modules\axios\lib\adapters\xhr.js:117:24 in handleError
at node_modules\event-target-shim\dist\event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:609:10 in setReadyState
at node_modules\react-native\Libraries\Network\XMLHttpRequest.js:396:6 in __didCompleteResponse
at node_modules\react-native\Libraries\vendor\emitter\_EventEmitter.js:135:10 in EventEmitter#emit
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

Currently, the GET request works when running the Expo app in a web browser and in Postman, if I trust the self-signed certificate of course, or disable SSL verification.

IOS Device where the problem persists is an iPhone 11 Pro Max running IOS 14.8.1

Solution 1:^[1]

try using ngrok, download and extract it on the same folder and use this command ngrok http http://localhost:your_api_port you will get an ngrok url which you could send requests to from your react native app

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Esmail Khorchani

'Connecting to local Express API from Expo app using physical IOS device

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]