$http.JSONP() returning 404 eror in ionic application

Question

I am having an error with a mobile app built with AngularJS and Ionic Framework on Cordova / PhoneGap.

It connects to our servers and checks the username and password. It will return 21 if username/password is valid or -22 if invalid in JSONP format. If the request fails, then the $http request has an error handler that will print out the error code. The status for $http errors and the user told me they got a 404 error.

Here's the code for the controller.js

.controller('SignInCtrl', function ($scope, $state, $ionicLoading, $ionicPopup, $ionicViewService, $Authentication) {

  $scope.signin = function (user) {
    $Authentication.signin(user.email, user.password);
    $ionicLoading.show({
      template: 'Connexion...'
    });
  };
  // listen for the event in the relevant $scope
  $scope.$on('event:signin-success', function() {
    $ionicLoading.hide();
    $ionicViewService.nextViewOptions({
      disableBack: true
    });
    $state.go('tab.regular', {url: '/regular'};
  });

  $scope.$on('event:signin-error', function() {
    $ionicLoading.hide();
    var alertPopup = $ionicPopup.alert({
      title: 'Oops!',
      template: 'Votre email ou mot de passe est invalide. Essayez à nouveau.',
      okText: 'OK'
    });
    alertPopup.then(function(res) {
    });
  });

  $scope.$on('event:signin-failure', function() {
    $ionicLoading.hide();
    var alertPopup = $ionicPopup.alert({
      title: 'Oops!',
      template: 'Pas de connexion internet. Connectez-vous à internet et essayez à nouveau.',
      okText: 'OK'
    });
    alertPopup.then(function(res) {
    });
  });
})

Here's the code for the service.js

.factory('$Authentication', function($http, $rootScope) {

  var login_url    = 'http://../signin';
  var user;

  if (localStorage.user) {
    user = JSON.parse(localStorage.getItem('user'));
  }

  return {
    USER: user,

    signin: function (email , password) {
      console.log('Signing in...');`enter code here`

      $http.jsonp(login_url, {params: {email: email, password: password, callback: 'JSON_CALLBACK'}})
      .success(function (data, status, headers, config) {`enter code here`
        if (data.status > 0) {
          console.log('Sign in: Success');
          localStorage.setItem('user', JSON.stringify(user));
          // firing an event downwards
          $rootScope.$broadcast('event:signin-success');
        }
        else {
          console.log('Sign in: Error');
          $rootScope.$broadcast('event:signin-error');
        }
      })
      .error(function (data, status, headers, config) {
        console.log('Sign in: Failure');
        $rootScope.$broadcast('event:signin-failure');
      });
    },

  };
})

Here's the code for signin.html

<ion-view  hide-nav-bar="true" >
   <ion-content class="padding">

     <div class=" card padding" >

      <p><center>
       <img src="img/dig1.png" style="margin-top:5%;">
       </center> </p><p>

        <label class="item item-input">  
          <i class="icon ion-ios7-email placeholder-icon"></i>
            <input type="text" placeholder="Enter your email adresse" ng-model="user.email">
        </label>

        <label class="item item-input">
          <i class="icon ion-locked placeholder-icon"></i>
            <input type="password"  placeholder="Enter your password" ng-model="user.password">
        </label>

        <label class="item">
          <button  class="button button-block icon-left ion-log-in button-positive" ng-click="signin(user)"> 
                &nbsp;&nbsp;Sign In
          </button>
       </div> 

  </ion-content>
</ion-view>

Please I need help. Can you please point out where in code I have done wrong?

Vishnu · Answer 1 · 2015-08-04T11:24:03.427

0

As you are using $http.jsonp, it will make a GET request to the server. But your login service uses POST request. You cannot make POST request using $http.jsonp

You have to use $http.post or XMLHttpRequest to post the data.

$http({
  url: login_url,
  method: "POST",
  withCredentials:true,
  data: {email: email, password: password, callback: 'JSON_CALLBACK'}
}).success(function(data, status, headers, config) {
    if (data.status > 0) {
      console.log('Sign in: Success');
      localStorage.setItem('user', JSON.stringify(user));
      // firing an event downwards
      $rootScope.$broadcast('event:signin-success');
    }
    else {
      console.log('Sign in: Error');
      $rootScope.$broadcast('event:signin-error');
    }
}).error(function(data, status, headers, config) {
    console.log('Sign in: Failure');
    $rootScope.$broadcast('event:signin-failure');
});

edited Aug 04 '15 at 11:24

answered Aug 04 '15 at 10:13

Vishnu

11,614
6
51
90

thanks a lot , can you please help me with example that show me how to use the $http.post() in my case , in fact i m beginner in ionic and thanks in advance – doudou Aug 04 '15 at 11:00
@doudou you can see many examples in the internet. Updated the answer – Vishnu Aug 04 '15 at 11:24
@doudou does that help? – Vishnu Aug 04 '15 at 11:46
it doesn't work !! and the response this time ; 400 bad request – doudou Aug 05 '15 at 08:48
http://stackoverflow.com/questions/16017081/getting-400-bad-request-error-in-jquery-ajax-post/16054639#16054639 – Vishnu Aug 05 '15 at 09:01
it doesn't work !! and the same response ; 400 bad request – doudou Aug 05 '15 at 09:16

$http.JSONP() returning 404 eror in ionic application

1 Answers1