Angular & Ionic, HTTP Get not working in real device IOS

Question

I have problem in my app , when I run the app in local host it's working without problem and I can see the channel list but when I try to test the app by physical device it doesn't show anything. I think the problem comes from the method that I'm using to send json data through http.

(function () {
'use strict';

angular.module('testApp').controller('ChannelCtrl', ['$state', 'testApi', ChannelCtrl]);

function ChannelCtrl($state, testApi) {
    var vm = this;

myscreenApi.getChannels().then(function(data){
         vm.channels = data;
     });

    vm.selectLeague = function(id){
        testApi.setChannelId(id);
        $state.go("app.video");
    }

};
})();

and this my function to get channeldata

function getChannels() {
        var deferred = $q.defer(),
            cacheKey = "leagues",
            ChannelsData = null;

        if (ChannelsData) {
            console.log("Found data inside cache", ChannelsData);
            deferred.resolve(ChannelsData);
            $window.alert("From Cache");
        } else {
            $http.get("http://example.com/api/videos/getchannels")
                .success(function(data) {
                    console.log("Received data via HTTP");
                    self.leaguesCache.put(cacheKey, data);
                    $window.alert("From HTTP");
                    deferred.resolve(data);
                })
                .error(function(dataerr) {
                    console.log("Error while making HTTP call.");
                    $window.alert("Error baba daram " + dataerr);
                    deferred.reject();
                });
        }
        return deferred.promise;
    }

when i send data with JSON.parse() , it works right.

vm.channels = JSON.parse('[{"Name":"MyScreen News","ID":46,"Thumbnail":"CB46.jpg","Videos":null}]');

The overall, I used the ASP.NET Web API which is send data by JSON. The App works well in our desktop however the running application can not retrieve data from our host. Moreover, when I inject data in program directly it works in both platform. In addition the ionic config file presented below:

  <content src="index.html"/>
  <access origin="*"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="BackupWebStorage" value="none"/>
  <feature name="StatusBar">
    <param name="ios-package" value="CDVStatusBar" onload="true"/>
  </feature>

That's all. ;)

Solution 1

If you're using one of the latest versions of cordova you might have to install the cordova plugin whitelist:

cordova plugin add cordova-plugin-whitelist

If you're using IIS Express you might find a few problems.
I've detailed some more explanation here.

Solution 2

Had exactly the same problem while working on a test server. It seems that iOS 9 added a layer of security to their applications by not allowing an app to connect to a server through HTTP rather than HTTPS.

To fix this, you have to add This Patch to your info.plist iOS build.

Remember that this solution is INSECURE and shouldn't be used in production web services.

Comments

[Nima]

As I explained in my detail code in config.xml <access origin="*"/> I have already. ? ;(

[LeftyX]

It doesn't matter. you might want to read this.

[artdias90]

Mark this as solved please, was exactly the sollution.

[ComeRun]

@Nima Hello Nima, I know its an old one but did you manage to fix this issue? I am going through a similar issue and your help would be much appreciated.

[Pritish]

@LeftyX I am also facing the same issue Also I read the link that yoy have given for reference also done the changes as per but still it;s not working. My question is here stackoverflow.com/questions/39451383/…

[Raghuram]

I have installed the above plugin even though it is not going through and my code is $http.get('118.67.249.142/CKC_NEW/c').then(function(response‌​) { console.log("Insert") angular.forEach(response.data, function(res, key) { var query = "INSERT OR REPLACE INTO adminshop1(shopid,url) VALUES (?,?)"; $cordovaSQLite.execute(db, query, [res.shopid, res.url, res.shopname, res.Description, res.type]).then(function(res) { if (response.data.length == key + 1) { $rootScope.selectAll(); } }, function(err) {}); }) });

[kilkfoe]

I had an error "Cannot find module 'simple-plist'". I was able to fix it by running "npm install simple-plist" - then I was able to add the whitelist plugin. This also may only work on cordova 7.1 so if you're on 8.0 or beyond you may need to roll back if you're getting errors.