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.
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.