使用Java Script / AJAX中的基本身份驗證將POST請求發送到REST API

Question

我正在做一個副項目，在該項目中，我必須創建一個HTML頁面並將POST請求發送到Heroku上托管的REST API。 我正在通過文本框從用戶那里獲得所需的信息。 這里的問題是REST API中具有基本身份驗證實現。

我來自Java /后端背景。 Googleing，研究和試驗並沒有太大幫助。 也沒有相同的教程。 我的代碼如下。 我不確定在哪里插入基本身份驗證的代碼。 由於我是JS / AJAX的新手，因此不勝感激！

謝謝！

<script type="text/javascript">

        $(document).ready(function () {
               $('#createuserbutton').click(function () {
                var un = $('#username').val();
                var pw = $('#password').val();
                var fn = $('#firstName').val();
                var ln = $('#lastName').val();

                $.post("https://example.com/createUser", 
                {
                    firstName: fn,
                    lastName: ln,
                    authority: 'ROLE_USER',
                }, function(data, status){
                    $("#createuserpre").html(JSON.stringify(data, undefined, 2));
                    alert("data: " + data + " status: " + status)
                });
            });

        });
    </script>

Answer 1

您可以使用jquery beforeSend添加授權標頭

<script type="text/javascript">

    $(document).ready(function () {
           $('#createuserbutton').click(function () {
            var un = $('#username').val();
            var pw = $('#password').val();
            var fn = $('#firstName').val();
            var ln = $('#lastName').val();

            $.post("https://example.com/createUser", 
            {
                firstName: fn,
                lastName: ln,
                authority: 'ROLE_USER',
            }, beforeSend: function (xhr) {
                 xhr.setRequestHeader('Authorization', 'Basic ' + btoa('user:password'));
            }, function(data, status){
                $("#createuserpre").html(JSON.stringify(data, undefined, 2));
                alert("data: " + data + " status: " + status)
            });
        });

    });
</script>