Problem testing app in Android Studio requesting to API in localhost

[orangeberet]

Hello, when compiling to android and testing the app it can not connect to the API mounted in localhost. It seems to be the mixed content problem since the app is mounted in a webview through https but my API is served in localhost over http. The app mounted with ionic serve and working in browser has no problems.

2023-07-03 20:30:15.481 28982-28982 Capacitor/Console ionic.soporteabptec E File: https://localhost/assets/index-7bae8f37.js - Line 232 - Msg: Mixed Content: The page at ‘https://localhost/home’ was loaded over HTTPS, but requested an insecure resource ‘http://10.0.2.2:8000/api/login’. This request has been blocked; the content must be served over HTTPS.

2023-07-03 20:30:15.541 28982-28982 Capacitor/Console ionic.soporteabptec E File: https://localhost/assets/index-7bae8f37.js - Line 232 - Msg: TypeError: Failed to fetch

So, I have looking for solutions but didnt find anything. For example this thread for the Angular version:

Allowing mixed content on Android Cordova app

I am building an Android app using Cordova, that runs on Android 8.1. This app will be used in a LAN only and it needs to consume data from a local REST Webserver over HTTP… but because Android 8 forces Ionic apps to run under HTTPS, I am getting an error when trying to access the REST server over HTTP. By doing some research, I discovered that the solution is to change WebView settings to allow mixed content. There were several ways to do this, but the easiest one was to add this line to my …

I am using Ionic React v7, and I expected to see something useful and easy to do quickly because I suppose a lot of devs are testing with APIs in localhost, so… any idea?

Thank you in advance.

[ermohitpy]

Move your assets to ‘public/assets’ folder and then use path like ‘/assets/image.png’. Now check your app in prod mode.
I used this then both my images shown fine and api works properly.