AJAX 中的 Http POST 请求完美运行，但在 AngularJS 中却不行

Question

我对 AngularJS 有疑问。我正在使用 Spring-Security 保护我的 Java Spring REST Web 应用程序。我卡在日志页面上 - http post 使用 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）。 URL 是一样的。有人可以帮我解决这个问题吗？

我也尝试发送裸字符串而不是“数据”对象，它似乎也没有用。

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 中，这将被绑定：

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

}

Content-Type: application/json 中的数据通过负载以 JSON 格式发送，例如：{ parm1: 1, parm2: 2, parm3: 3 }

在 .NET MVC WebAPI 中，这将被绑定：

[HttpPost]
public HttpResponseMessage Simple(Parameters parameters) {

}