CODEWITHSUNDEEP
angularjsionic-framework
Foad Saeidi Nik
Foad Saeidi Nik

Reputation: 279

Get null response in http get ionic

I'm developing a mobile app using ionic and angularjs. Every thing is so fine , but i don't know why when I'm trying to make a http get request , the failure mathod is called and data is null and the status is 0. What am I doing wrong ? Here is my app.js

angular.module('starter', ['ionic'])//, 'starter.controllers'])
    .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) {
        StatusBar.styleDefault();
      }
    });
    })

    .config(function($stateProvider, $urlRouterProvider) {
      $stateProvider

      .state('login_page', {
        url: '/login_page',
        templateUrl: 'templates/login_page.html',
        controller: 'LoginPageCtrl'
      })
      $urlRouterProvider.otherwise('/login_page');
    })

    .controller('LoginPageCtrl', function($scope , $http) {
      $http.get('http://91.109.23.124:3000/api/v1/discounts.json').success(function(data, status, headers, config) {
        console.log('success');
      })
      .error(function(data, status) {
        console.log('error');
      })  ;
    })

Upvotes: 2

Views: 11288

Answers (5)

avck
avck

Reputation: 3693

This is a CORS issue, but apart from Access-Control-Allow-Origin the HTTP methods also have to be allowed (at least in express apps) with `Access-Control-Allow-Methods

PATCH was returning status 0 while GET, POST, PUT, OPTIONS were working.

Here is my express middleware to handle CORS:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Methods", "POST, GET, OPTIONS,\
    PATCH, PUT, DELETE");
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, \
    Content-Type, Accept, Authorization");
  next();
});

Upvotes: 0

JLamkin
JLamkin

Reputation: 721

I was getting this issue and for me it was an iOS9 App Transport Security issue. I temporarily just set NSAllowAribitrayLoads in the app.plist to continue developing while waiting on the backend to meet App Transport Security spec.

Upvotes: 0

casper123
casper123

Reputation: 1766

For me, it was white-listing issue. See cordova plugin for white-listing urls

https://github.com/apache/cordova-plugin-whitelist

As of Cordova 4.0, cordova has tightened its white-listing policy.

Upvotes: 0

Lotus
Lotus

Reputation: 2656

For me, it was a CORS issue. In Sails.js I had to set origin: '*' and headers: 'content-type,X-Bearer-Token'

Upvotes: 0

Quannt
Quannt

Reputation: 2075

0 is a vague status code and can mean a lot of things. See this answer for more information https://stackoverflow.com/a/26451773/1487831

So I created a plunker with your code http://plnkr.co/edit/2OWOxuI7kjEzcbOzp9lZ?p=preview

script.js

// Code goes here

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



.controller('LoginPageCtrl', function($scope, $http) {
  $scope.status = '';
  $scope.data = '';
  $scope.headers = '';
  $scope.config = '';
  $scope.showResponse = false;

  $http.get('http://91.109.23.124:3000/api/v1/discounts.json').success(function(data, status, headers, config) {
          $scope.showResponse = true;
      $scope.data = data;
      $scope.status = status;
      $scope.headers = headers;
      $scope.config = config;
  })
    .error(function(data, status,headers,config) {
      $scope.showResponse = true;
      $scope.data = data;
      $scope.status = status;
      $scope.headers = headers;
      $scope.config = config;
    });
})

index.html

<!DOCTYPE html>
<html ng-app="starter">

<head>
  <script data-require="[email protected]" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="LoginPageCtrl">
  <div ng-if="!showResponse">
    <span>Requesting...</span>
  </div>
  <div ng-if="showResponse">
    <span>Request finished with </span>
    <span>status {{status}}</span> 
    <br/>

    <span>Url : {{config.url}}</span> 
    <br/>
    <span>method : {{config.method}}</span> 
    <br/>
    <span>Request : {{config.transformRequest}}</span> 
    <br/>
    <span>Response : {{config.transformResponse}}</span> 
    <br/>

    <span>Header : {{config.headers}}</span> 
    <br/>
  </div>
</body>

</html>

and it looks like you are having CORS issue.

If you have control at the server side. Include Access-Control-Allow-Origin to the response header and you should be good to go.

Upvotes: 3

Related Questions