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

by

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.

More Related Contents:

  1. Cordova + Angularjs + Device Ready
  2. ion-content and ion-footer have different $scope
  3. $apply already in progress error
  4. Clear History and Reload Page on Login/Logout Using Ionic Framework
  5. Adding google plus login to ionic app
  6. Run a controller function whenever a view is opened/shown
  7. ionic app cannot connect cors enabled server with $http
  8. Why give an “abstract: true” state a url?
  9. XMLHttpRequest cannot load and Response for preflight has invalid HTTP status code 405
  10. Is it feasible for a start-up of two developers to do full automated regression testing without manual testing? [closed]
  11. Why don’t the AngularJS docs use a dot in the model directive?
  12. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  13. AngularJS For Loop with Numbers & Ranges
  14. AngularJS-Twig conflict with double curly braces
  15. AngularJS – Create a directive that uses ng-model
  16. AngularJS ng-class if-else expression
  17. No ‘Access-Control-Allow-Origin’ header is present on the requested resource- AngularJS
  18. AngularJS : ng-repeat filter when value is greater than
  19. Angular – ui-router get previous state
  20. AngularJs Remove duplicate elements in ng-repeat
  21. How would I have ui-router go to an external link, such as google.com?
  22. How to highlight a current menu item?
  23. AngularJS All slashes in URL changed to %2F
  24. Lazy loading AngularJS modules with RequireJS
  25. ng-options with simple array init
  26. stop angular-ui-router navigation until promise is resolved
  27. How to set the value attribute for select options?
  28. AngularJS: How to nest applications within an angular app
  29. Get the current browser name in Protractor test
  30. How do I filter an array with AngularJS and use a property of the filtered object as the ng-model attribute?

Leave a Comment