通过Ajax进行基本身份验证,可访问使用https保护的页面,而无需在对话框中输入用户名和密码

时间:2019-06-03 14:37:30

标签: javascript html ajax

我需要访问并显示一个在此url上托管的网站页面-https://xxxxx.com,而在同一网络中托管的我的应用程序中没有任何身份验证对话框。但是我不能再见-将对话框传递给输入用户名和密码。

我使用Basic Auth进行授权,并且可以与Postman一起很好地工作。我通过在标头中提供Authorization的Basic Auth值在Postman中获得成功的响应。我在Springboot代码中使用了与Basic Auth相同的加密值来获取一些该页面上的详细信息,它也可以正常工作。

但是,当我尝试使用标签和Javascript导航/显示此页面时,在设置了基本身份验证所需的标头后,我得到了错误响应和未授权-带有消息401-    WWW-Authenticate:Basic realm =“请使用您的Office电子邮件用户名登录(不带@ xxx.xx)”

我尝试了不同的ajax组合,但没有得到200个代码,它总是要求输入对话框,要求我输入用户名和密码。否则以401结尾。

下面是使用的代码。

function handleSubmit(e){
        $.ajax({
            url: 'https://xxxxxx.com/se/',
            headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type':'application/json',

            },
            type: 'GET',
            dataType: 'json',
            async: false,
            data: '',
             beforeSend: function (xhr) {
                  xhr.setRequestHeader('Authorization', "Basic cmlqdS5mcmFuY2lzOkN1cmlwczIxxxxxxxx==");
                  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
              },
            success: function(){
              alert('succes: ');
            }

          });
}

这是我的HTML表单-       

2 个答案:

答案 0 :(得分:0)

这是我的Ajaxrequests基本代码。我用它来在我的Webspace上请求一个安全的Dir。作为URL,我使用CORS代理来绕过CORS问题并使AuthAccess正常工作。

也许您可以为您的应用程序尝试一下。如果您可以使它正常运行而不会出现401错误且无需输入登录信息,则可以在不使用CORS代理URL的情况下添加CORS标头。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>
             function ajax() {
                user = "test";   //  Insert your
                pass = "test";   //    real Login here

                $.ajax({
                    url : "https://--insert-a-cors-proxy-here--.com/https://youdomain.here/secured/index.php",
                    type : "get",
                    cache : false,
                    beforeSend : function(xhr) {
                            xhr.setRequestHeader("Authorization", "Basic " + btoa(user+":"+pass));
                    },
                    success : function (result) {
                        $("#result").html(result);
                    },
                    "error": function() {  $('#errorbox').html('Oh noo, Error!');  }
                });
            }
        </script>

    </head>
    <body>
            <input type="button" value="Request with Ajax!" onclick="ajax();">

            <div id="errorbox" style="background-color:red">&nbsp;</div>
            <div id="result" style="background-color:yellow">&nbsp;</div>
    </body>
</html>

答案 1 :(得分:0)

在我的then函数中将其修改为history.pushState({},null,'/xxx.com')后,此方法正常工作