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

问题

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.

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

回答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';">

来源：https://stackoverflow.com/questions/30326148/cordova-ionic-http-request-not-processing-while-emulating-or-running-on-dev