将基本身份验证与 jQuery 和 Ajax 结合使用

javascript jquery ajax authentication

2022-08-29 23:15:14

我正在尝试通过浏览器创建基本身份验证，但我无法真正到达那里。

如果此脚本不在此处，则浏览器身份验证将接管，但我想告诉浏览器用户即将进行身份验证。

地址应如下所示：

http://username:password@server.in.local/

我有一个表格：

<form name="cookieform" id="login" method="post">
      <input type="text" name="username" id="username" class="text"/>
      <input type="password" name="password" id="password" class="text"/>
      <input type="submit" name="sub" value="Submit" class="page"/>
</form>

还有一个脚本：

var username = $("input#username").val();
var password = $("input#password").val();

function make_base_auth(user, password) {
  var tok = user + ':' + password;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}
$.ajax
  ({
    type: "GET",
    url: "index1.php",
    dataType: 'json',
    async: false,
    data: '{"username": "' + username + '", "password" : "' + password + '"}',
    success: function (){
    alert('Thanks for your comment!');
    }
});

答案 1

使用 jQuery 的 beforeSend 回调添加包含身份验证信息的 HTTP 标头：

beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
},

答案 2

一年中情况如何变化。除了替换的 header 属性之外，当前的 jQuery （1.7.2+）还包括一个用户名和密码属性与调用。xhr.setRequestHeader$.ajax

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  username: username,
  password: password,
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

从评论和其他答案中编辑：要清楚 - 为了在没有响应的情况下抢先发送身份验证，而不是（在-1.7之前）使用：401 UnauthorizedsetRequestHeader'headers'

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});