javascript – HTTP Basic Auth中的自定义HTML登录表单

我有一个HTTP Basic Auth的API.如果未经过身份验证的用户发送HTTP请求,则服务器将返回401状态代码和WWW-Authenticate标头.浏览器显示标准登录表单.是否可以显示我的HTML登录表单而不是标准浏览器的登录表单？

解决方法:

由于您正在使用AJAX调用,因此您可以从服务器拦截401状态代码并将用户重定向到自定义登录表单.例如,假设您使用的是jQuery并尝试使用基本身份验证API端点https://httpbin.org/basic-auth/user/passwd访问受保护的数据：

$.ajax({
    url: 'https://httpbin.org/basic-auth/user/passwd',
    type: 'GET'
}).then(function(result) {
    alert('success');
}).fail(function(xhr) {
   if (xhr.status === 401) {
       // we are not authenticated => we must redirect the user to our custom login form
       window.location.href = '/my-custom-login-form';
   }
});

收集用户名和密码后,您将知道如何在对API的后续请求中构建正确的身份验证标头：

$.ajax({
    url: 'https://httpbin.org/basic-auth/user/passwd',
    type: 'GET',
    headers: {
        Authorization: 'Basic dXNlcjpwYXNzd2Q='
    }
})...

标签：javascript,http-authentication,http-basic-authentication
来源： https://codeday.me/bug/20190523/1156739.html