javascriptangularjsauthenticationsatellizer

Satellizer login error bacuase of CORS


I am trying to implement the satellizer's local signup and signin instance. The signup (register) works (although it "preflights" the request with an OPTIONS method before doing a request with POST).

Now, the problem is when I try to login, I get a 400, with the Network tab telling me I used "OPTIONS". I have looked at almost all the questions here and they suggest I set my permissions right on the server' side.

So, the following have been added to the server side, to give permission to any request

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Authorization"

But I am still getting the same error.

This is my login controller, inside a modal:

angular.module('auth').controller('LoginCtrl',function($rootScope, 
  $scope, $location, $localStorage, $auth, $modalInstance, 
  $modal){

  $scope.formData = {

   email:'',
   password:'',


  };

  $scope.master = {};

    $scope.update = function(user) {
      $scope.master = angular.copy(user);

    };

    $scope.reset = function(form) {
      if (form) {
        form.$setPristine();
        form.$setUntouched();
      }
      $scope.user = angular.copy($scope.master);
    };

  $scope.reset();

  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };


$scope.login = function(){

   $auth.login({
      email: $scope.formData.email,
      password: $scope.formData.password,
      grant_type: 'password'
  }).then(function(res){
      alert('success, WELCOME ' + res.data.user.email + '!')
  }) .catch(function(err){
        alert(err.message)
  });
};


});

This is my app.js:

angular.module('app').config(function($stateProvider, $urlRouterProvider,
     $authProvider, 
    $httpProvider, urls) {

    /* Add New States Above */
    $urlRouterProvider.otherwise('/home');

    $authProvider.signupUrl = urls.BASE_API + '/Register';
    $authProvider.loginUrl = urls.BASE + '/Token';

});

Can anyone help with this?


Solution

  • Directly editing local.login and local.signin functions of satllizer.js has done the trick:

     local.login = function(user, redirect) {
          var loginUrl = config.baseUrl ? utils.joinUrl(config.baseUrl, config.loginUrl) : config.loginUrl;
          return $http.post(loginUrl, $.param(user), { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept':'*/*'}})
            .then(function(response) {
              shared.setToken(response, redirect);
              return response;
            });
    };
    
        local.signup = function(user) {
          var signupUrl = config.baseUrl ? utils.joinUrl(config.baseUrl, config.signupUrl) : config.signupUrl;
    return $http.post(signupUrl,  $.param(user), { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept':'*/*'}})
            .then(function(response) {
              if (config.loginOnSignup) {
                shared.setToken(response);
              } else if (config.signupRedirect) {
                $location.path(config.signupRedirect);
              }
              return response;
            });
        };
    

    Basically append the following to $http.post(loginUrl, $.param(user)):

    $.param(user), { headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept':'*/*'}}