Axios Network Error with React native, Nodejs, Express, MongoDB

Question

I am trying to develop make app with server. I had a below settings.
React native Expo-cli
nodejs + express
mongodb

I had some trouble connecting client program and server program with physical android phone and ios phone both.
I logged linux server program by ssh and its ip address and used port is like below
server ip: 102.249.18.175
port: 443

part of frontend code is like below

try {
      const response = await axios.post(
        "http://192.249.18.175:443/userAuth/signin",
        {
          email,
          password,
        }
      );

      console.log("signin response: ", response);

      if (response.data.succ) {
        return Alert.alert("로그인 성공");
      } else {
        // login fail ...
        return Alert.alert("로그인 정보가 맞지 않습니다, 다시 입력해주세요");
      }
    } catch (e) {
      const errorResponse = (e as AxiosError).response;
      console.error(errorResponse);
      // if (errorResponse) {
      //   Alert.alert("알림", errorResponse.data.message);
      // }

      console.log("Hello world!");
      return Alert.alert(`Error: ${JSON.stringify(e.response)}`);
    }

this is part of backend code

app.post("/userAuth/signin", async (req, res) => {
  const { email, password } = req.body;
  console.log(req.body);
  isLocated = await userAuth.find({ email: email, password: password });
  if (isLocated) {
    res.status(200).json({ succ: true });
  } else {
    res.status(404).json({ succ: false });
  }
});

this is output logged on console, which is e.response

Hello world!

XMLHttpRequest {
  "DONE": 4,
  "HEADERS_RECEIVED": 2,
  "LOADING": 3,
  "OPENED": 1,
  "UNSENT": 0,
  "_aborted": false,
  "_cachedResponse": undefined,
  "_hasError": true,
  "_headers": Object {
    "accept": "application/json, text/plain, */*",
    "content-type": "application/json",
  },
  "_incrementalEvents": false,
  "_lowerCaseResponseHeaders": Object {},
  "_method": "POST",
  "_perfKey": "network_XMLHttpRequest_http://192.249.18.175:443/userAuth/signin",
  "_performanceLogger": PerformanceLogger {
    "_closed": false,
    "_extras": Object {},
    "_pointExtras": Object {},
    "_points": Object {
      "initializeCore_end": 1657466704543,
      "initializeCore_start": 1657466704328,
    },
    "_timespans": Object {
      "network_XMLHttpRequest_http://143.248.219.186:19000/logs": Object {
        "endExtras": undefined,
        "endTime": 1657466705712,
        "startExtras": undefined,
        "startTime": 1657466705643,
        "totalTime": 69,
      },
      "network_XMLHttpRequest_http://143.248.219.186:19000/symbolicate": Object {
        "endExtras": undefined,
        "endTime": 1657466844264,
        "startExtras": undefined,
        "startTime": 1657466844224,
        "totalTime": 40,
      },
      "network_XMLHttpRequest_http://192.249.18.175:443/userAuth/signin": Object {
        "startExtras": undefined,
        "startTime": 1657466713331,
      },
    },
  },
  "_requestId": null,
  "_response": "Failed to connect to /192.249.18.175:443",
  "_responseType": "",
  "_sent": true,
  "_subscriptions": Array [],
  "_timedOut": false,
  "_trackingName": "unknown",
  "_url": "http://192.249.18.175:443/userAuth/signin",
  "data": undefined,
  "readyState": 4,
  "responseHeaders": undefined,
  "status": 0,
  "timeout": 0,
  "upload": XMLHttpRequestEventTarget {},
  "withCredentials": true,
}
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:66:31 in <anonymous>
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:86:13 in tryCatch
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:124:27 in invoke
at node_modules\@babel\runtime\helpers\regeneratorRuntime.js:132:16 in PromiseImpl.resolve.then$argument_1
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

I successfully connected server and mongodb.

[nodemon] 2.0.19
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Server started at 443
connected to mongoDB

Do you have any insight about this problem?
Thank you for reading this writing.

Do you really use http://192.249.18.175:443? Port 443 normally used for https, not http. — Heiko Theißen

Cristian Riță Cristian Riță · Accepted Answer · 2022-07-10T18:29:24

The problem might be that you try to make a request over HTTP. For android try to enable cleartext network traffic like this:

<?xml version="1.0" encoding="utf-8"?>
<manifest ...>
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        android:usesCleartextTraffic="true"
        ...>
        ...
    </application>
</manifest>

Similarly, on iOS, you have NSAppTransportSecurity setting. You can modify Info.plist file like this:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

Be careful, you should only allow HTTP traffic on development. Make sure you revert these changes on Production.

Axios Network Error with React native, Nodejs, Express, MongoDB

1 Answers