Call API on local dev server from Ionic app on device with SSL

Question

I am developing an Android mobile app with an ASP.NET CORE Webapi 5.0 back end. I can make API calls when I run the app on a web browser using ionic serve, but when I run it on the device (ionic cordova run android --device), I keep getting ERR_CONNECTION_TIMED_OUT. I have enabled CORS and the API and device are running on the same Wifi network. I suspect the issue maybe that the backend is running over https and I need to make some adjustments for that, but I don't know what that would be. I have tried to research this, but can't find anything I really understand.

I have installed cordova-plugin-whitelist, but don't know if any further configuration is needed.

I am making the api calls using https://<my-computer-IP>:<port>/<apiendpoint>

UPDATE: I updated the URL bindings for IIS Express to use URLs with my computer's IP address. The calls work in my web browser. I also disabled SSL and the Firewall. But I am still getting the ERR_CONNECTION_TIMED_OUT when attempting to make the same API call from my device

Thanks for everyone's patience, I'm not well-versed on network issues.

Ionic Info:


   Ionic CLI                     : 5.4.16 (C:\Users\sarah\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 5.6.3
   @angular-devkit/build-angular : 0.1102.8
   @angular-devkit/schematics    : 11.2.8
   @angular/cli                  : 11.2.8
   @ionic/angular-toolkit        : 3.1.1

Cordova:

   Cordova CLI       : 10.0.0
   Cordova Platforms : android 10.1.0
   Cordova Plugins   : cordova-plugin-ionic-webview 5.0.0, (and 7 other plugins)

Utility:

   cordova-res : 0.15.3
   native-run  : 1.3.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm               : 7.8.0
   OS                : Windows 10

MRichards · Accepted Answer · 2022-03-02T16:25:20.427

Turns out the Firewall was the culprit, just didn't catch it before. Disabling it allowed the call to go through. Here is everything that I did:

Configured IIS Express to use URLs with my computer's local IP. Here is how you can do that: https://learn.microsoft.com/en-us/iis/extensions/using-iis-express/handling-url-binding-failures-in-iis-express

This post was helpful for adding a new certificate (needed for the new https URL added in the previous step): ASP.NET Core + IIS Express how to setup SSL Certificate

UPDATE in 2022: After upgrading to Windows 11 and upgrading Chrome, I had to regenerate the self-signed cert and remove the -KeyUsage flag for the previous step to work. See this post for more details.

I disabled the Firewall and SSL. Disabling SSL causes ERR_CLEARTEXT_NOT_PERMITTED, here's how you can deal with that: https://linuxpip.org/how-to-fix-neterr_cleartext_not_permitted/

I re-enabled SSL and it still worked!

Call API on local dev server from Ionic app on device with SSL

1 Answers1