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

Posted 2023-02-27

【中文标题】AJAX 中的 Http POST 请求完美运行，但在 AngularJS 中却不行

【英文标题】：Http POST request in AJAX works perfectly but not in AngularJS

【发布时间】：2018-02-08 09:07:18

【问题描述】：

我对 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 是一样的。有人可以帮我解决这个问题吗？

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

【参考方案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) 

【讨论】：

感谢您的帮助，但遗憾的是它并没有太大变化。仍然没有信息传递到后端。我正在使用 Java Spring。没关系，它确实有效！您的 anwser + 发送对象作为原始字符串有帮助。谢谢！