Wednesday, April 6, 2016

Ionic Android fails AJAX calls with Cordova Whitelist

By Hường Hana 6:00 PM , , Leave a Comment

Anyone know how I give an Android Ionic app permission to make cross-domain $http calls?

I have tried the suggestions mentioned in this post: Ionic + Angular - How to avoid the "404 Not Found (from cache)" after POST request?

I have my Content Security meta tag set to accept everything but my app still won't allow any AJAX calls (AngularJS $http.get). 

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

The error is in the

ionic.bundle.js:17746, error message 'failed'

(no details). The calls I am trying to make are not https.

Works fine in iOS.

Example call:

$http.get(AppConfig.apiHost + "/api/user/",  {params: {user_id: target_user_id}}) .success(function (target_user) { // do something}) .error(function (error) { console.log(error)});

CLARIFICATIONS FROM COMMENTS BELOW

Here is my config.xml: https://gist.github.com/metalaureate/6f8237b673dacc1412c0b928b7a3d9e5

Cordova CLI: 6.0.0 Ionic Version: 1.0.0-rc.0 Ionic CLI Version: 1.7.14 Ionic App Lib Version: 0.7.0 ios-deploy version: 1.8.5 ios-sim version: 5.0.6 OS: Mac OS X El Capitan Node Version: v0.12.2 Xcode version: Xcode 7.3 Build version 7D175

Plugins: cordova-plugin-app-event,cordova-plugin-badge,cordova-plugin-camera,cordova-plugin-contacts,cordova-plugin-device,cordova-plugin-file,cordova-plugin-file-transfer,cordova-plugin-image-picker,cordova-plugin-inappbrowser,cordova-plugin-whitelist,cordova-plugin-x-socialsharing,cordova-plugin-x-toast,de.appplant.cordova.plugin.local-notification,phonegap-plugin-push

All AJAX calls fail.

All testing on a real Samsung S4

3 Answers

Answers 1

This is a very unspecific error, but here are some suggestions you could try to track down the cause of your problem:

  • If your device has Android <4.4: update it, try it with another device with a newer version or use Crosswalk to use the CSP feature with older Android versions
  • Update your Ionic sources
  • Specifically whitelist your API host URL in your CSP settings. That said, default-src * should cover this. You could also try to remove the CSP content altogether: <meta http-equiv="Content-Security-Policy"> (not recommended for production!)
  • Can you reach the API host (or any other URL) from any other app on your device? If not, you may want to check the Wifi connection of your test device ;)

Answers 2

added the plugin

ionic plugin add https://github.com/apache/cordova-plugin-whitelist.git

Answers 3

can u hit the url on simple android chrome browser ? Can u add <meta http-equiv="Content-Security-Policy" content="default-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ 'unsafe-inline' 'unsafe-eval'"> where "http://your url" as inside the tag after googleapis.com meta tag .

I can think that it might be a CORS issue. If possible could u try by making changes in the ionic.project file and adding a new property 

 { 2   "name": "app", 3   "app_id": "", 4   "proxies": [{ 5     "path": "/api/myurl", 6     "proxyUrl": "http://Your-URL" 7   }] 8 }

and making get request by path name and not by url

$http.get('/api/myurl/')

References :- http://ionicinaction.com/blog/how-to-fix-cors-problems-and-no-access-control-allow-origin-header-errors-with-ionic/

http://ionicinaction.com/blog/how-to-fix-cors-issues-revisited/

IONIC, Access-Control-Allow-Origin

ionic app cannot connect cors enabled server with $http

http://blog.ionic.io/handling-cors-issues-in-ionic/

Now this same issue doesnot happen with cordova .

Hope it Helps.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment