Cordova 6 app cannot load from file:// path

Question

I have updated an existing app to Cordova 6.0.0 and am having problems running it on an iOS device with XCode 7.2.1 targeting iOS 9.

I have installed the WKWebView plugin: cordova-plugin-wkwebview-engine 1.0.2

When running the app, which is built with AngularJS, one of the first things it tries to do is open a json file:

$http.get('data/config.json').success(function(data) {
  // do stuff
});

But we get this error in the web view console:

XMLHttpRequest cannot load file:///var/mobile/Containers/Bundle/Application/
E9D74C94-ADC6-410F-9F41-7CE63CB7877F/Milk.app/www/data/config.json. Cross 
origin requests are only supported for HTTP.

In the config.xml file we have:

<access origin="*" subdomains="true" />

Why is the file:// request being blocked like this and how can I fix it?

*edit*

According to the plugin page:

"In iOS 9, Apple has fixed the issue present through iOS 8 where you cannot load locale files using file://, and must resort to using a local webserver. However, you are still not able to use XHR from the file:// protocol without CORS enabled on your server."

What do they mean by "your server"? What server? We are loading a local file, there is no server!

Solution 1

EDIT:

The ionic team has been working on a fork of the WKWebViewEngine plugin and has fixed some of the XHR issues, not sure if this one is fixed. You can take a look on https://github.com/driftyco/cordova-plugin-wkwebview-engine

Old answer: This is a known issue, local file:// url XmlHttpRequests are not allowed in WKWebViewEngine (https://issues.apache.org/jira/browse/CB-10143)

For more known issues see https://issues.apache.org/jira/browse/CB-10237?jql=labels%20%3D%20wkwebview-known-issues

If you want to make local ajax call to work you should use the wkwebview-engine-localhost plugin (https://github.com/apache/cordova-plugins/tree/master/wkwebview-engine-localhost)

Or Telerik's WKWebView plugin (https://github.com/Telerik-Verified-Plugins/WKWebView).

Both of them will use a local webserver that solves some of the known WKWebView limitations.

Solution 2

Add these lines on your config.xml file. That solved my problem of reading local files.

<platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
</platform>

Solution 3

I was having problems with local file access as well including SQLite access. I created a plugin based on some sample code I found, modified it to get it working and it appears to work great now. YMMV

https://github.com/TheMattRay/cordova-plugin-wkwebviewxhrfix