[SOLVED] CORS issues with F7 in WKWebView

First I want to say thank you to everyone involved in Framework7! This Framework is really great!
I wrote 6 apps Version 1, all of them are using Cordova and are running in UIWebView on iOS. Now, I want to upgrade at least two apps to WKWebView because of performance issues with one app, and issues with iPhone X safe area in UIWebView. Actually, the apps are using v1 of Framework7, but I want to upgrade it to v2.
When I install the WKWebView Plugin, my app loads, but I can’t load any sub page. The JS console throws an error saying ‘Preflight response is not successful’, this happens with v1 and v2. I read that CORS combined with the file://-protocol is the issue, and there are two solutions: Using a local WebServer or loading the data via the cordova file plugin. I really don’t want to use a local web server, as this can’t be the solution to load files from the local disk. Is there any possibility to include support for the cordova file plugin? Or maybe an other solution? I’d really appreciate a solution!

Yes, there is an issue with CORS in WKWebView plugin. You can try this cordova plugin instead https://github.com/ionic-team/cordova-plugin-ionic-webview it can be used with F7+Cordova as well, and it already runs local server so all local XHR requests will work fine there

1 Like

Thanks, didn’t know they have a different plugin. It works, but sadly I can’t use it, because I have to transfer local storage content, which is atm only possible with cordova-plugin-migrate-localstorage and the official WKWebView plugin.

EDIT: I found a fork of the localstorage-plugin: https://github.com/jairemix/cordova-plugin-migrate-localstorage does it for cordova-plugin-ionic-webview

1 Like

Another solution

I have the same issue, works fine on emulator in X-Code but not on a real iPhone.

I use the ionic plugin but still have problems

code-push 2.0.4 “CodePushAcquisition”
cordova-plugin-code-push 1.11.7 “CodePush”
cordova-plugin-compat 1.2.0 “Compat”
cordova-plugin-device 2.0.1 “Device”
cordova-plugin-dialogs 2.0.1 “Notification”
cordova-plugin-file 4.3.3 “File”
cordova-plugin-file-transfer 1.6.3 “File Transfer”
cordova-plugin-inappbrowser 2.0.2 “InAppBrowser”
cordova-plugin-ionic-webview 1.1.16 “cordova-plugin-ionic-webview”
cordova-plugin-splashscreen 5.0.2 “Splashscreen”
cordova-plugin-whitelist 1.3.3 “Whitelist”
cordova-plugin-x-socialsharing 5.3.2 “SocialSharing”
cordova-plugin-zip 3.1.0 “cordova-plugin-zip”
es6-promise-plugin 4.2.2 “Promise”
pushwoosh-cordova-plugin 7.3 “Pushwoosh”

try to use the Safari Web Inspector to debug, it works on WKWebView

Im building an app with phone gap build.
Im trying to use the cordova-plugin-ionic-webview plugin, but it won´t load files from my server?

Im using jQuery to load the index.html file from my server and it works if I use the Uiwebview?

$('#siteloader').load('https://www.manmade.se/', function(response, status, xhr) {
				if (status == "error") {
					var msg = "Sorry but there was an error: ";
					alert(msg + xhr.status + " " + xhr.statusText);

Im using this in my config file:

<platform name="ios">
<allow-navigation href="http://localhost:8080/*"/>
<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />

<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
<plugin name="cordova-plugin-ionic-webview" source="npm"/>

I get the error, “Sorry but there was an error: 0 error”
So why isn´t it loading the webpage from my server?
I thought that the ionic web view did´nt have any cors problem?

Any input appreciated, thanks.