CODEWITHSUNDEEP
androidcordovaionic-framework
metalaureate
metalaureate

Reputation: 7732

Ionic Android fails AJAX calls with Cordova Whitelist

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

Upvotes: 4

Views: 1953

Answers (3)

kolli
kolli

Reputation: 1290

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

Upvotes: 3

IamKarim1992
IamKarim1992

Reputation: 646

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.

Upvotes: 1

Anurag Pandey
Anurag Pandey

Reputation: 744

added the plugin

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

Upvotes: 0

Related Questions