Ajax requests fail after upgrading to Cordova 5.0 + [email protected]

Question

I recently upgraded to Cordova 5.0 (and Cordova Android 4.0) and, since then, my app can no longer access external resources.

I still have <access origin="*" /> in config.xml (as before), and I still have <uses-permission android:name="android.permission.INTERNET" /> in AndroidManifest.xml (as before), but ajax calls are rejected with no explanation (the "textStatus" param is "error", the "errorThrown" param is null, and xhr.state() returns "rejected").

I've verified that no request is hitting the server, so it appears it is being stopped by Android, but the log doesn't give any explanation as to why...

I can access the URL in question fine from the Android browser, just not from the app.

The ajax request is made via a call to Backbone.sync() of Backbone.js, which ultimately calls jquery's $.ajax(). I haven't changed anything about how the call is made... just upgraded cordova.

Are there new requirements/setup for network requests, in Cordova 5.0, or anything I need to do differently from previous Cordova versions?

Does anyone know of a way I can get more information as to why Android and/or Cordova is rejecting the request?

Answer 1

I tracked the culprit down to the [email protected] cordova platform. It now requires the new cordova-plugin-whitelist plugin.

It can be installed with

cordova plugin add cordova-plugin-whitelist

or by adding

<plugin name="cordova-plugin-whitelist" spec="1" />

to config.xml, and then it is configured with

<allow-navigation href="*" />

in place of the old, <access origin="*" /> tag.

It's a little annoying that the log doesn't spit out the "whitelist rejection" error messages anymore when a problem like this comes up (that would have saved me a ton a time), but maybe that'll come later.

Answer 2

In Cordova 6.X you need to remove the builtin whitelist plugin and reinstall the new version of plugin.

cordova plugin remove cordova-plugin-whitelist

and re install the plugin

cordova plugin add cordova-plugin-whitelist

and then replace <allow-navigation href="*" /> to config.xml file instead of <access origin="*" /> in my case this trick worked.

Answer 3

Two things

1. Ensure the ajax url you are using allows cross origin requests
2. Are you passing relevant headers while making cross origin requests

To Read

http://enable-cors.org/

How to enable CORS in AngularJs

http://backbonetutorials.com/cross-domain-sessions/

Answer 4

if you are using cordova 6.x.x u need to uninstall builtin cordova-plugin-whitelist using

cordova plugin remove cordova-plugin-whitelist

and reinstall it by using

cordova plugin add cordova-plugin-whitelist

even if the issue persists relaunch command prompt and try it.

Answer 5

For me it started working after I removed from html file mata tag:

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