Ionic Android fails AJAX calls with Cordova Whitelist

4
votes

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
androidcordovaionic-framework
So this problem occurs for all $http calls or only for calls to your API host? Also, can you please specify your Ionic/Cordova/whitelist plugin versions. Did you test this on a real device? Which Android version? Are you using Crosswalk? Every additional info about your setup helps us identifying your problem :) – kolli
try using a newer version of Ionic, or put ng-csp into your body tag – jcesarmobile
@metalaureate, did you tried removing and adding the android platform once again? – Gandhi
So your Samsung still has the initial Android 4.2.2 or did you update it? The CSP feature is only available since Android 4.4. – kolli
@kolli et al I'm really embarrassed--the problem was the configuration of my internal wifi network that was blocking my Android device. If someone would like to post an answer of the form, "Because your networking error is so non-specific, double check your Android test device can actually connect to your wifi network", I would be happy to accept. – metalaureate

3 Answers

3
votes

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 ;)
1
votes

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.

0
votes

added the plugin

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