Can't connect to webservices from cordova app on android device

Question

My app tries to connect to my webservices running on my dev machine to retrieve the translations for my angular app.

On PC it works, but when I deploy to the android device ( Android 5.1.1), it doesn't seem to be able to find the url. When I inspect with Chrome, the log says status code 404...

I build with VS2015 Cordova tools update 6.

Strangely when I build from the commandline the app does work and I can communicate with my webservice...

How can I figure out what the difference is?

I redid my test with a blank template with only one call to get a file on the internet. Same result. Building with the VS2015 Cordova toolchain is not the same as building from the commandline.

I know the tools for Cordova have their own set of tools they use. But I can't figure out what the difference would be.

Answer 1

I found the diffence by comparing between the builds output folder of both.

It all starts with the plugins. When you have problems with connecting to external sources, all documentation says you have to add the 'whitelist' plugin to your project. But by default this is already present in the config.xml file used to configure cordova.

<widget xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:vs="http://schemas.microsoft.com/appx/2014/htmlapps" id="io.cordova.myappe4aa9e" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" defaultlocale="en-US">
  <name>App.2015</name>
  <description>A blank project that uses Apache Cordova to help you build an app that targets multiple mobile platforms: Android, iOS, Windows, and Windows Phone.</description>
  <author href="http://cordova.io" email="dev@cordova.apache.org">Apache Cordova Team </author>
  <content src="index.html" />
  <vs:features />
  <preference name="SplashScreen" value="screen" />
  <preference name="windows-target-version" value="8.1" />
  <!-- Support for Cordova 5.0.0 plugin system -->
  <plugin name="cordova-plugin-whitelist" version="1" />

At the bottom there were other plugins mentioned that I added through VS itself:

  <vs:plugin name="cordova-plugin-camera" version="2.1.0" />
  <vs:plugin name="cordova-plugin-file-transfer" version="1.5.0" />
  <vs:plugin name="cordova-plugin-file" version="4.1.1" />

Apparantly during the build inside visual studio the required plugins for the app are inserted based on the plugins mentioned here.

The whitelist plugin already there gets dropped from the added plugins!!!!

Solution: Add whitelist from the configuration UI in Visual Studio 2015

Result: in config.xml you now have:

  <vs:plugin name="cordova-plugin-whitelist" version="1.2.1" />

Added to the config.xml file.

Now the behaviour is the same for both.

Update: I could have known this if I had read all the known problems:

Old versions of Cordova plugins due to Cordova plugin ID changes A significant change occurred with Cordova 5.0.0+ that also altered the IDs of many core Cordova plugins. The Visual Studio 2015 config designer (config.xml) uses the old IDs (ex: org.apache.cordova.camera not cordova-plugin-camera) with Cordova 4.3.1 and below since the version of Cordova before 5.0.0 does not support npm.

If you update your Cordova version to 5.1.1 or later, the config designer will automatically switch to using the new IDs. If you do not see this behavior, update Tools for Apache Cordova. If you're an early adopter, you might not see some of the improvements described in this document until after you update since a small post-RTM update enabled this functionality. You will get an update notification soon that prompts you to update or, when creating a new project, you can click "Install Tools for Apache Cordova" from the Apache Cordova templates section. Be sure to remove plugins that use older IDs from your project before you add the updated plugins with the new IDs.

source