[SOLVED] IonicView App - Http request to external API

Good afternoon.

I am creating a simple application, I need to consult with an API, for a route to where I need to be authenticated.

The application works perfectly in the test environment, and even if I compile the iPhone / iPad / Android.

But when I upload the application to the Ionic View App, it no longer works, it seems that the requests are not made correctly.

Someone could explain to me why this is happening?

Thaanks :smile:

1 Like

where does your api run?

maybe you have a cors problem or something else?

The API runs on an external server.

And I have inserted in ionic.project file

"proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://myextsite.com/api/public/index.php/v1"
    }
]

In my app.js I have:

.constant('SERVER', {
    //url: 'https://myextsite.com/api/public/index.php/v1'
    url: 'v1'
})

Compiled on the smartphone or the local environment, the 2 urls of the constant SERVER work, except for the Ionic View App.

Here’s an example of request in my application:

var cred = {
                email: credentials.email,
                password: credentials.password,
                _token: TokenService.getToken()
            };

$http.post(SERVER.url + "/login", cred)
     .success(function(response)
     {
         usr.isAuth = response.data.success;
         usr.username = response.data.user;
         usr.password = response.data.password;

         cacheSession();
     })
     .error(function(err)
     {
         uncacheSession();
     });

Can you debug request response or error?
or does it not send at all?

I can not debug the Ionic View App (I think).

So for this reason I created the post, because the application works everywhere, except in the Ionic View. :confused:

Would you be able to PM me the app id and I can debug it? We had someone else report a similar issue, and although it ended up being unrelated to the actual requests, it’s still frustrating for people to have things work in the emulator and device but not View.

i know… but there is a difference with the request is not sent or blocked.
i would bet it is a cors problem.

I do not know much about the view app but maybe you can try remote debugging on android with google chrome to see made requests and possible errors.

1 Like

Thank you for listening, just send a PM.

Once you get the android my friend, I’ll try to debug.

But I think you may be right.

Just send a PM to Tim, if I get anything, will be posting.

We’re getting the same issue. Ionic’s proxy works great with ionic serve but doesn’t seem to be working inside Ionic View. Really frustrating because we can’t seem to debug it any way other than with alert() statements - OSX Safari doesn’t seem to let you debug in the same way as when you run a proper compiled app via ionic run ios.

Is there any way to debug this or should we switch to using Testflight for the forseeable future?

Ook guys, Tim helped me a lot and thanks to him, it was possible to solve the problem

Just follow what RomanMinkin commented on this link:
https://github.com/driftyco/ionic-view-issues/issues/10

This problem happens if you already uploaded the application and downloaded it to your device.

For me it was possible to solve by following these steps:

  1. Upload the application with the URL of the server again to IonicView App (Just in case);
  2. Open the IonicView App and clean the app data;
  3. Restart IonicView app (double tap on home button and closing process).

Thank you Tim, for helping me with this problem.
:smile::smile::smile:

2 Likes

Can help me?

I’m working with restangular and in browser and iOS emulator working perfect, but in IonicView App not working, does not request.

{
  "name": "IonicTest",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "http://api.site.com/v1"
    }
  ],
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "www/**/*",
    "!www/lib/**/*"
  ]
}

app.js

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'restangular'])

.constant('ApiEndpoint', {
  url: 'v1'
})

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider, RestangularProvider, ApiEndpoint) {
  // Restangular config
  RestangularProvider.setBaseUrl(ApiEndpoint.url);
  RestangularProvider.setDefaultRequestParams({ app_key: "MyKey" });
  RestangularProvider.setFullResponse(true);

  $stateProvider

  // setup an abstract state for the tabs directive
  .state('tab', {
    url: "/tab",
    abstract: true,
    templateUrl: "templates/tabs.html"
  })

  // Each tab has its own nav history stack:

  .state('tab.establishments', {
    url: '/establishments',
    views: {
      'tab-establishments': {
        templateUrl: 'templates/tab-establishments.html',
        controller: 'EstablishmentsController'
      }
    }
  })

  .state('tab.establishment-detail', {
    url: '/establishments/:id/:key',
    views: {
      'tab-establishments': {
        templateUrl: 'templates/establishment-detail.html',
        controller: 'EstablishmentsDetailController'
      }
    }
  })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/tab/establishments');

});

controller.js

angular.module('starter.controllers', [])

.controller('EstablishmentsController', function($scope, Establishments) {
  $scope.establishments = Establishments.all();
})

.controller('EstablishmentsDetailController', function($scope, $stateParams, Establishments) {
  $scope.establishment = Establishments.show($stateParams.id, $stateParams.key);
});

services.js

angular.module('starter.services', [])

.factory('Establishments', function(Restangular) {
  return {
    all: function() {
        return Restangular.all("establishments").getList().$object;
    },

    show: function(id, key) {
      return Restangular.one("establishments", id).get({ establishment_key: key}).$object;
    }
  };
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>


    <!-- compiled css output -->
    <link href="css/ionic.app.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- dependencies -->
    <script src="lib/restangular/dist/restangular.min.js"></script>
    <script src="lib/lodash/dist/lodash.min.js"></script>
    <script src="lib/lodash/dist/lodash.underscore.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-energized">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

Hello.

In this case, your constant ApiEndpoint need to be:

.constant('ApiEndpoint', {
  url: 'http://api.site.com/v1'
})

Considering that this address is not in a local development environment. :dizzy_face:

And when you upload the code to the IonicView App make sure that you change this constant url, and follow the steps of my comment above.

3 Likes

I have the same problem, genymotion, and smartphone work normal and the ionic serves as proxy help but also in Ionic View not.

Hello, could you solved this problem? I’ll really apreciate your help. Greetings :wink:

There seems to be no point for the proxy if you do that. You could set it up without the proxy and run it with the whole URL and it would work the same. I would figure the fact that you are defining the proxy and it’s path that you wouldn’t have to do that.

I’m having the same problem.

Everything works with serve and when build on iOS and Android and also with ionic view on iOS. When using ionic view on android http requests fails.

I’m using https://github.com/sahat/satellizer and login fails… I’m not sure if the request if blocked or not sent at all.

Any ideas?

Is anyone else experiencing the same issue. I am having the same problem though not really similar. The requests seems to be doing well on browser when i serve my app but on the emulator and phone, just doesn’t really seem to work :pensive:. Tried to work the solutions given but nothing happens.

Hello, I was having the same problem
The problem was because the request was ssl(https ), with the request without ssl (http) work for me.
I hope help someone.

2 Likes

I’m running into this problem today. My ionic app (1.7.11) works with ionic serve, natively on iOS and android, works in iOS in ionic view but not on android in ionic view. Everything works except the $http requests. Is there some way to debug the ionic view app? Hard to track down where to start looking.

1 Like