Question

我对AngularJS有疑问。我正致力于使用Spring-Security保护我的Java Spring REST Web应用程序。我坚持登录页面 - 使用AJAX完美地使用http post，但是在使用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）。网址是相同的。有人可以帮我解决这个问题吗？

我也试过发送裸字符串而不是＆＃39;数据＆＃39;对象，它似乎也没有用。

Answer 1

默认情况下，jQuery使用Content-Type: x-www-form-urlencoded发送数据，并使用$http发送AngularJS 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) {

}

AJAX中的Http POST请求工作正常，但在AngularJS中没有

1 个答案: