Cordova / Ionic : $http request not processing while emulating or running on device

Question

Everything were going well last week and while i was running the application on device or emulating with Genymotion, all the calls to the api were working (Either returning the data or failing but at least showing something).

I was using

ionic run android

I add to update the global cordova ionic:

npm install -g cordova ionic

Since that all the $http requests are not even processing. I can't get any responses while the Api is still working fine and the CORS are perfectly set.

The only way i found is to use the option --livereload or -l :

ionic run -l android

I want to avoid using the livereload at any cost.

I started to create a project from scratch using ionic 1.0.0 and cordova lib 4.3.0.

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout, $http) {

  alert('calling api');
  // Create an anonymous access_token
  $http
      .get(domain+'/oauth/v2/token?client_id='+public_id+'&client_secret='+secret+'&grant_type=client_credentials')
      .then(function(response){
          alert(response.data.access_token);
      });
})

So while using :

ionic serve

It is correctly alerting 'calling api' then the response (An OAuth access token for that example).

But while using :

ionic run android

It is only alerting 'calling api' but doesn't seem to process the http request.

Did anyone experience something similar? I'm getting big headaches on that.

Answer 1

With the update of Cordova 4.0.0, you will face an issue of not being able to make HTTP calls to RESTful APIs and load external resources, which include other HTMLs/video/audio/images.

Whitelisting the domains using cordova-plugin-whitelist solves the issue.

remove whitelist plugin if already installed:

cordova plugin remove cordova-plugin-whitelist

Add the whitelist plugin via CLI:

cordova plugin add cordova-plugin-whitelist

and then add the following line of code to your app's config.xml which is located in your application's root directory:

Reccomended in the documentation:

<allow-navigation href="http://example.com/*" />

or:

<allow-navigation href="http://*/*" />

and

this meta tag in your index.html

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"/>

The reason for this issue:

From Cordova 4.0.0 for Android's update:

Whitelist functionality is revamped

• You will need to add the new cordova-plugin-whitelist plugin to continue using a whitelist

• Setting a Content-Security-Policy (CSP) is now supported and is the recommended way to whitelist (see details in plugin readme)

• Network requests are blocked by default without the plugin, so install this plugin even to allow all requests, and even if you are using CSP.

• This new whitelist is enhanced to be more secure and configurable, but the Legacy whitelist behaviour is still available via a separate plugin (not recommended).

Note: while not strictly part of this release, the latest default app created by cordova-cli will include this plugin by default.

Answer 2

It worked for me, when I tried the following…

In Config.xml, allow access & navigations to your domains:

<access origin="http://yourdomain1.com" />
<allow-navigation href="http://yourdomain1.com"/>

Then in index.html, add the Content-Security-Policy as below:

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