Cordova AJAX request not working - ios

Question

I'm using Cordova 5.3.1, and I seem to be totally unable to make any network requests without errors. If I add
$.ajax( "http://foo.bar.com/getfeed" )
.done(function() {
alert( "success" );
})
.fail(function(jqXHR, textStatus, errorThrown) {
alert( errorThrown );
})
.always(function() {
alert( "complete" );
});
to index.js it fails and alerts Error: SecurityError: DOM Exception 18 in iOS and SecurityError: Failed to execute 'open on 'XMLHttpRequest': Refused to connect to 'http://foo.bar.com/getfeed' because it violates the document's Content Security Policy., so it look like CORS is being blocked.
Currently the whitelist plugin doesn't install properly when you install it as per this SO post and this JIRA issue, basically it requires the iOS platform >=4.0.0-dev. I can still force it to install an older version with:
cordova plugin add cordova-plugin-whitelist#1.0.0
as per the suggestions in the SO post and JIRA issue.
However I am still unable to make any http requests to external domains. I still get the same 'DOM Exception 18' error. My config.xml file is currently
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.company.pearstest" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>CORS test</name>
<description>
A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev#cordova.apache.org" href="http://cordova.io">
Apache Cordova Team
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" version="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<platform name="android">
<allow-intent href="market:*" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
</platform>
</widget>
The tag for allowing different origins seems to have changed over different versions lately and as a result I've tried every conceivable combination of various different tags in this file.
I've also checked $.support.cors to make sure that jQuery allows CORS and it does (jQuery is working properly as the AJAX requests are running the fail callback rather than silently failing).
I also have the meta tag
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:">
in index.html. I suspect this isn't an issue with my emulator blocking http requests as it's a problem in both Android and iOS emulators and on an Android device.
Does anyone have any idea why I'm still having CORS issues? Thanks.

Answer 1

Have you tried configuring your Content-Security-Policy to look like:
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
Note the * in default-src and use of ; - I've also included some other instructions in the example above to allow common JS libraries to work... this is what I use in JQuery / Handlebars Cordova 5 apps I am building for Android and iOS.

Answer 2

For iOS, if you're building for iOS9 and you want to be able to hit unsecured endpoints, you will have to edit your plist file. This gist has instructions.
I'm personally still having issues with Cordova 5.3.1 and Android cross-domain ajax requests. This stuff all worked fine on the older version of Cordova.
[EDIT] Android required the whitelist plugin in order for ajax requests to work. Janky IMO, but happy to have ajax working again on android.

Answer 3

What worked for me :
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">