PhoneGap Android from 3.7.0 to 4.0.2 cross-domain XHR 404's

Question

I have an Android application with the following in config.xml:

<access origin="*" />

Then, I begin a request to an API end-point using Angular $http like this:

$http({
  data: this._createTokenRequest(tenant, username, password),
  method: 'POST',
  headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
  timeout: 10000,
  url: url + '/api/RequestToken'
}).catch(err => {
  alert(err.message || err);
  alert(JSON.stringify(err));
}).then(response => {
  alert(response);
});

In 3.7.0 the response handler will be invoked. Since upgrading to 4.0.2 (using PhoneGap Build setting <preference name="phonegap-version" value="cli-5.1.1" /> as according to http://phonegap.com/blog/2015/06/16/phonegap-updated-on-build/), the catch is invoked with a 404 Not Found error.

What could have caused this? I see no relevant entry in the changelog (https://github.com/apache/cordova-android/blob/4.0.2/RELEASENOTES.md).

Answer 1

When you switch to cli-5.1.1, you will switch to the 4.0.x version of Android. As @laughingpine has pointed out in a comment, the white-listing mechanism has been changed. Earlier, you could use <access origin="*" /> to obtain access to all domains. This no longer applies.

Now you need cordova-plugin-whitelist (https://github.com/apache/cordova-plugin-whitelist). Please refer to the documentation for the specifics. The rough equivalent of the earlier wildcard is <allow-navigation href="*" />, which is the new mechanism.

To build under PhoneGap Build (hence forth referred to as PGB), you will need to add the plugin. Since the plugin is available under npm (the Node Package Manager), you can find the latest version under the cordova-plugin-whitelist name (https://www.npmjs.com/package/cordova-plugin-whitelist). PGB can build a plugin from npm with the following notation:

<gap:plugin name="cordova-plugin-whitelist" version="1.0.0" source="npm" />

Now PGB will build correctly and your whitelist works as before.

Answer 2

For anyone else who had a legacy app built in phonegap but updated their build process to use a recent version of cordova, Roel's answer needs a slight tweak.

old config.xml

<widget ... />
     <name>Legacy App built in phonegap</name>
     <access origin="*" />
</widget>

new config.xml for cordova

<widget ... />
     <name>Legacy App built in phonegap</name>
     <plugin name="cordova-plugin-whitelist" version="1" />
     <allow-navigation href="*" />
</widget>

If you get an XML: unbound prefix exception being thrown, this may help.