Cordova HttpClient calls fails in IOS device but works in Androids

Question

I know this was asked before HTTPS request fails only on iOS, Ionic 2 but those answers did not work for me.

I already have below setting in [myproject]-info.plist file in ios xcode10 project

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

And there is no wkwebview plugin installed in my project as here, instead there is ionic-webview-plug installed in my project.

The endpoint is the MVC controller action method which is hosted in Windows server. I could not debug from windows the IOS App using chrome://inspect like I do for Android testing. While the App able to access other static links such as images, but this web service calls are failing.

In the Angular code below is how the web service calls are made using HttpClient

var oDat = {
uuid: uuid
};
let headers = new HttpHeaders();
headers = headers.set(‘Content-Type’, ‘application/json; charset=utf-8’);
return this.http.post(this.apiUrl23, JSON.stringify(oDat), {headers: headers}).pipe(
map(this.extractData),
catchError(this.handleError)
);

Below is one such subscriber code triggered from pages

  this.horoService.getPlan(this.device.uuid)
           .subscribe(res => {
                this.info2 = '';
                let pln: Plan = { uuid: res['uuid'], name: res['name'], credits: res['credits'], dobs: res['dobs'] };
                this.plan = pln;
                if(res['name'] == 'xxx.xxx.xxx.xxx'){
                    this.showSU = true;
                    this.showCR = false;
                    this.showASU = false;
                } else if(Number(res['credits']) == 0) {
                    this.showSU = false;
                    this.showCR = true;
                    this.showASU = false;
                } else {
                    this.showSU = true;
                    this.showCR = false;
                    this.showASU = true;
                }
            }, (err) => {
                    this.showSU = false;
                    this.showCR = false;
                    this.showASU = false;
                this.info2 = JSON.stringify(err);
            });    

Below is the Cordova version used in my project

Ionic:
   ionic (Ionic CLI)  : 4.2.1 (C:\Users\Hamsini\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 6.3.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 1.2.1, (and 12 other plugins)

The build is made on xCode10 and tested on ipad version 9.3.5

Any guess?

UPDATE-30/10 While I run with ionic serve I could see HTTPResponse coming back correctly but then in the .subscribe (err) handler it shows Unknown URL, Unknown error

Answer 1

I am answering my own question as this may help someone.

The issue appears to be with WKWebView after downgrading to UIWebView seems resolved

Below steps are needed for now till Cordova fixes the issue

This post is very much detailed about the xCode10 & Cordova compatibility issue, this has been a while since launched still Cordova guys not come up with solution the work around is to ignore the new architecture during the build process, deployment process when it comes to iOS is little complicated as it more relies on XCode an MAC platform, so after you build with below command line

ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"

You will also have to make sure in the xCode build settings to choose "Legacy Build System" as shown here and here

But there may have other side effects may have caused due to this downgrade for instance tapping on some part of SVG image in the App not working, which was working before with Android devices, for which the even listeners are attached dynamically not sure if this is due to downgrade of if not just works for iOS devices as I haven't tested this App before in any other iOS devices