AngularJS $http ajax does not follow Location header

Question

I'm running Grails with the Spring Security plugin. On the clientside I'm running AngularJS from where I want to authenticate the user. Ideally I want to use the $http module from Angular, but apparently it does not follow a Location: header sent by the server.

What's happening is that the Spring Security returns a 302 Moved temporarily which should be queried/followed automatically like jQuery does.

The jQuery snippet below works fine and creates a new GET request based on the Location: "http://agrarius.nl/login/ajaxSuccess" response header:

$.ajax({
    url: serverUri+'/j_spring_security_check?ajax=true', 
    data: data,
    method: 'POST'
})

The AngularJS approach does not seem to follow anything and just quits:

// Setup Config
var data = {
    j_username: $scope.user.email,
    j_password: $scope.user.password
}

var config = {
    method: 'POST', 
    url: serverUri+'/j_spring_security_check?ajax=true', 
    data: $.param(data),
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},

};

// Dispatch HTTP Request
$http(config)
.success(function(data, status, headers, config) {
    if (data.status) {
        // successful login
        User.isLogged = true;
        User.username = data.username;
    }
    else {
        User.isLogged = false;
        User.username = '';
    }
    $scope.loggingIn = false;
})
.error(function(data, status, headers, config) {
    $scope.loggingIn = false;
    User.isLogged = false;
    User.username = '';

    if (status == 0) {
        // Request got cancelled
        console.log("Request got cancelled.");
        return;
    }
});

Any idea why it doesn; function this way? And is it 'safe' to use jQuery instead? :)

Answer 1

You can try the following:

$http.post(serverUri+'/j_spring_security_check?ajax=true', $.param(data))
.then(function (response){
    var location = response.headers('Location');
    return $http.get(location);
})
.then(function (response) {
    if (response.data.status) 
    {
      // successful login
      User.isLogged = true;
      User.username = response.data.username;
    }
    else 
    {
      User.isLogged = false;
      User.username = '';
    }
    $scope.loggingIn = false;
});