如何将基本验证标题添加到返回HTML的邮政请求中

对于我正在从事的项目之一，有一个受基本auth保护的端点，它返回了HTML表单。这是使用Express服务器托管的，并使用Passport的基本验证进行保护。我想拥有另一个HTML表单，该表格具有一个按钮，当单击时，该按钮将加载该html在浏览器中。我试图拥有与此类似的形式：

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

但是，当单击按钮并检查服务器上的auth标题时，它们似乎是未设置的(req.headers.authorization = undefined(。我知道我可以使用JavaScript设置Auth标题，但是如果这样做，我不确定如何在该页面上的浏览器中加载HTML。那么，如何处理需要基本验证标头的端点，使用POST和返回HTML访问？这似乎应该很容易做，但是我不确定该怎么做。

您需要在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>

相关内容

最新更新

热门标签：