HTTP get and post API with rxjs not working if i use CDVWKWebViewEngine for IOS App

Ionic Framework ionic-v3
1

My HTTP get and post API with rxjs not working if i use CDVWKWebViewEngine for IOS App

[DEBUG] Did open IPv4 listening socket 6
[DEBUG] Did open IPv6 listening socket 7
[INFO] GCDWebServer started on port 8080 and reachable at http://localhost:8080/
2017-07-24 15:32:04.540195+0530 Keeper[763:520520] CDVWKWebViewEngine: trying to inject XHR polyfill
2017-07-24 15:32:04.736864+0530 Keeper[763:520520] CDVWKWebViewEngine will reload WKWebView if required on resume
2017-07-24 15:32:04.737016+0530 Keeper[763:520520] Using Ionic WKWebView
2017-07-24 15:32:04.738320+0530 Keeper[763:520520] [CDVTimer][handleopenurl] 0.374019ms
2017-07-24 15:32:04.748953+0530 Keeper[763:520520] [CDVTimer][intentandnavigationfilter] 10.448039ms
2017-07-24 15:32:04.749381+0530 Keeper[763:520520] [CDVTimer][gesturehandler] 0.236034ms
2017-07-24 15:32:04.779321+0530 Keeper[763:520520] [CDVTimer][splashscreen] 29.834032ms
2017-07-24 15:32:04.804716+0530 Keeper[763:520520] [CDVTimer][statusbar] 25.201976ms
2017-07-24 15:32:04.807498+0530 Keeper[763:520520] [CDVTimer][keyboard] 2.551019ms
2017-07-24 15:32:04.807686+0530 Keeper[763:520520] [CDVTimer][TotalPluginStartup] 69.822967ms
[DEBUG] Did open connection on socket 8
[DEBUG] Did connect
[DEBUG] Did start background task
[DEBUG] Connection received 445 bytes on socket 8
[DEBUG] Connection on socket 8 preflighting request "GET /var/containers/Bundle/Application/deviceid/Keeper.app/www/index.html" with 445 bytes body
[DEBUG] Connection on socket 8 processing request "GET /var/containers/Bundle/Application/deviceid/Keeper.app/www/index.html" with 445 bytes body
[DEBUG] Connection sent 303 bytes on socket 8
[DEBUG] Connection sent 1431 bytes on socket 8
[DEBUG] Did close connection on socket 8
[VERBOSE] [::1:8080] ::1:56784 200 "GET /var/containers/Bundle/Application/deviceid/Keeper.app/www/index.html" (445 | 1734)
[DEBUG] Did open connection on socket 8
[DEBUG] Did open connection on socket 9
[DEBUG] Did open connection on socket 10
[DEBUG] Did open connection on socket 11
[DEBUG] Connection received 506 bytes on socket 8

it have a long logs, posted a part

2

Are you testing in the iPhone simulator or on a real device?

If you are using the simulator and your API runs locally on port 8080, it will lead to an error because WKWebView uses this port internally. But it looks like it’s another problem.

You should post the JavaScript logs from Safari developer tools so we can see the HTTP status or JavaScript errors. You can also have a look into the network section to check the status of the HTTP request.

3

I am using real device iPhone 5.

4

You can check the JavaScript logs (and use all the other tools) for real devices as well.

Follow these instructions: https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Make sure to run your Ionic app in debug mode (don’t add the --release flag during build), otherwise debugging may be blocked.

5

@sonuyadav
This issue happened due to the WKWebView Mostly

So, the very simple way to use the WKWebView in Ionic is that You Must uninstall the previously installed UIWebView from the plugin by running the following command.

  • ionic cordova plugin remove cordova-plugin-ionic-webview

After that try to add the WKWebView Plugin with this command

  • ionic cordova plugin add cordova-plugin-wkwebview-engine

When the WkWebView plugin is installed the very next thing is to add the following lines in the config.xml file

feature name=“CDVWKWebViewEngine”

param name=“ios-package” value=“CDVWKWebViewEngine”

feature

preference name=“CordovaWebViewEngine” value=“CDVWKWebViewEngine”

preference name=“WKWebViewOnly” value=“true”

After doing all that when you try to run the application and hit some api call you will get the preflight issue in that due to CORS so to fix that. Simply run the following command

  • ionic cordova plugin add cordova-plugin-wkwebviewxhrfix

After adding the above plugin the CORS issue will be resolved

Thanks,
Happy Coding