How to configure Content Security Policy and whitelist plugin for cordova to fetch local files

Question

Getting the error Cross origin requests are only supported for HTTP on iPhone cordova/phonegap app. This works fine on Android.

var url = 'info.json'; // a localhost file in the www folder
var jqxhr = $.getJSON(url, function(data) {
    console.log( "LOADING SUCCESS: ",data );
}).fail(function(data) {
    console.log( "LOADING FAILED: ",data );
});

I have tried numerous content security policies. The most recent one I used is:

default-src *  data: blob: filesystem: about: ws: wss: 'unsafe-inline' 'unsafe-eval' 'unsafe-dynamic'; 
script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; 
connect-src * data: blob: 'unsafe-inline'; 
img-src * data: blob: 'unsafe-inline'; 
frame-src * data: blob: ; 
style-src * data: blob: 'unsafe-inline';
font-src * data: blob: 'unsafe-inline';

The config.xml for cordova-plugins-whitelist is configured with:

<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*" />

I have also tried using cordova-plugin-file which also throws CORS errors. I have tried removing platform and adding it again.

I use phonegap prepare ios, and then use xcode to build.

Answer 1

If you are using iOS WKWebView, you won't be able to access files via XHR. If you are using cordova-ios < 6.0.0, then you can add the cordova-plugin-file-xhr plugin. The issue is that XHR calls with WKWebView do not set an origin and breaks CORS requested, even to localhost (via file://).

If you are using cordova-ios >= 6.0.0, then this functionality is missing and you should fall back to 5.1.1