My Ionic app can’t access my local Node server from Android emulator

Issue

I’m trying to run for the first time my React/Ionic app on an Android Emulator using Capacitor. The app should connect to my local Node server using Axios.

While my app started successfully on the emulator, all server requests failed with Msg: Error: Network Error

Here’s the steps that I did:

  • I configured Axios to connect to http://10.0.2.2:3001 instead of localhost, but the requests still fail

  • I opened the url http://10.0.2.2:3001/api in the Android Emulator Chrome browser, and it succeeded in connecting to my server and returning a response

  • I tried adding to my capacitor.config.json file the following conf, but my app still fails

    "server": {
      "allowNavigation": ["10.0.2.2"]
    }
    

Would you have other advices I should try to make my app connect to my local server? Thank you

Solution

After searching, I found the solution in another SO question :

  • The problem comes from the fact the my app uses http instead of https requests which Android forbids by default, starting with API level 28.

To allow http requests, I added android:usesCleartextTraffic"true" to my app’s AndroidManifest.xml

Reference: https://developer.android.com/guide/topics/manifest/application-element#usesCleartextTraffic

Answered By – H-H

Leave a Comment