在AJAX中的HTTP POST請求完美工作，但不是在AngularJS中

Question

我對AngularJS有問題。我正致力於使用Spring-Security來保護我的Java Spring REST Web應用程序。我堅持在日誌頁面 - http發佈完美使用AJAX，但它不使用AngularJS。

jQuery(document).ready(function ($) { 
    $('#login-form').submit(function (event) { 
     event.preventDefault(); 
     var data = 'username=' + $('#username').val() + '&password=' + $('#password').val(); 
       console.log(data); 
     $.ajax({ 
      data: data, 
      timeout: 1000, 
      type: 'POST', 
      url: 'http://localhost:8080/OnlineGameStore/login' 

     }).done(function(data, textStatus, jqXHR) { 
      console.log("Done!") 

     }).fail(function(jqXHR, textStatus, errorThrown) { 
      alert('Booh! Wrong credentials, try again!'); 
     }); 
    }); 
    }); 

此AJAX代碼完美工作，證書正確發送到服務器。但是：

angular.module('login').controller('LoginCtrl', function($scope, $http, $location, AuthUser){ 

$scope.login = function(){ 
    AuthUser.authenticateUser($scope.username, $scope.password, $location).then(function(response){ 
     console.log(response); 
    }); 

}; 
}); 

angular.module('login').service('AuthUser', function($http, $location){ 

    this.authenticateUser = function(username, password, $location){ 
     var absUrl = $location.absUrl(); 
     console.log(absUrl); 

     var data = { 
      username: username, 
      password: password 
     }; 

     var config = { 
       headers : { 
        'Content-type': 'application/json' 
       } 

     return $http.post(absUrl, data, config) 
      .then(
       function(response){ 
        return "Successfully logged!"; 
       }, 
       function(response){ 
        window.alert("Failure!"); 
     }); 
    }; 

}); 

這並不工作 - 數據甚至心不是正確地發送到服務器，而不是提供的用戶名和密碼，我看到的是空值（和我得到的401所有的時間）。網址是一樣的。有人可以幫我解決這個問題嗎？

我也試着發送裸字符串，而不是'數據'對象，它似乎也沒有工作。

Answer 1

jQuery默認發送數據爲Content-Type: x-www-form-urlencoded和AngularJS $http服務發送與Content-Type: application/json。

如果您要發送的數據如jQuery然後將請求頭是這樣的：

var data = { 
     username: username, 
     password: password 
    }; 

    $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; 

    return $http.post(absUrl, data) 
     .then(
      function(response){ 
       return "Successfully logged!"; 
      }, 
      function(response){ 
       window.alert("Failure!"); 
    }); 

記住，這是全球配置$http服務。

我不知道您使用哪種技術運行後端，但通常使用默認的AngularJS標頭application/json會更好。

有什麼區別？在application/x-www-form-urlencoded

的數據由URI例如發送：?parm1=1&parm2=2&parm3=3

在.NET MVC的WebAPI這將被綁定爲：

在 Content-Type: application/json

[HttpPost] 
public HttpResponseMessage Simple(int parm1, int parm2, int parm3) { 

} 

數據由有效載荷JSON格式例如發送：{ parm1: 1, parm2: 2, parm3: 3 }

在.NET MVC的WebAPI這將被綁定爲：

[HttpPost] 
public HttpResponseMessage Simple(Parameters parameters) { 

}