如何将基本身份验证标头添加到返回html的发布请求中?

时间:2018-02-19 22:21:25

标签: javascript html express post

对于我正在处理的其中一个项目,有一个POST端点受基本身份验证保护,它返回一个HTML表单。这是使用快速服务器托管并使用护照的基本身份验证进行保护。我想要另一个HTML表单,其中包含一个按钮,单击该按钮时会在浏览器中加载该html。我试图找到一个类似于这个的表格:

<form method="post" action="http://username:password@localhost:8080/endpoint">
     <input type="submit">  
</form>

但是当单击按钮并检查服务器上的auth标头时,它们似乎未设置(req.headers.authorization = undefined)。我知道我可以使用Javascript设置auth标头,但如果我这样做,我不知道如何在该页面的浏览器中加载html。那么,如何处理需要基本auth头的端点,使用post访问并返回HTML?这看起来应该很容易,但我不知道该怎么做。

1 个答案:

答案 0 :(得分:0)

您需要在javascript中添加auth标头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script  src="http://code.jquery.com/jquery-3.3.1.min.js"   integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="   crossorigin="anonymous"></script>
</head>
<body>

<form id="myForm">
    <input type="submit">
</form>

<script type="application/javascript">
    $("#myForm").submit(function (e) {
        var url = 'http://localhost:8080/endpoint';
        var username = 'username';
        var password = 'password';
        $.ajax
        ({
            type: "POST",
            url: url,
            dataType: 'json',
            async: false,
            headers: {
                "Authorization": "Basic " + btoa(username + ":" + password)
            },
            data: '{ "comment" }',
            success: function (response){
                $(body).empty();
                $(body).html(response);
            }
        });
        e.preventDefault();
    });
</script>
</body>
</html>