CORS settings for Play Framework to allow for http(s) calls inside of WkWebview

Ionic Framework ionic-v3
1

Hi Ionic Community!

I was hoping I could get some help with configuring CORS correctly for WkWebview as I am having trouble debugging my configuration with the Play Framework.

When I run my app on an iOS device or simulator, I get “preflight response is not successful” errors. However, Android and browser settings work fine (including Chrome, FF, Safari and IE).

I initially tried an “open” policy as below, but did not have any luck.

cors {
	pathPrefixes = ["/"]
        allowedOrigins = null
        allowedHttpMethods = null
        allowedHttpHeaders = null
        exposedHeaders = ["Access-Control-Allow-Origin"]
        preflightMaxAge = 3 days
}

After reading https://ionicframework.com/docs/wkwebview/ I developed a configuration to match the following checklist:

  • Adding localhost:8080 as an origin
  • Whitelisting methods
  • Whitelisting headers
  • CORS preflight request (OPTION)

Thus I changed my configuration to:

   pathPrefixes = ["/"]
   allowedOrigins = ["http://localhost:8080"]
   allowedHttpMethods = ["GET", "POST", "PUT", "OPTIONS", "HEAD"]
   allowedHttpHeaders = ["Accept", "Content-Type", "Referer", "X-Requested-With", "X-Auth-Token"]
   exposedHeaders = ["Access-Control-Allow-Origin"]
   preflightMaxAge = 3 days

However I still get the preflight error as before, which leads me to believe I have not implemented CORS correctly in regards to the checklist.

Does this configuration correctly address the CORS checklist from above? Has anyone deployed an Ionic app with a Play Framework backend that successfully handles CORS for WkWebview?

Any help is appreciated! Thanks in advance :slight_smile:

2

@mwileycd
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