Auth参数没有被正确传输？

Question

我正在Web服务器上使用HTTPBasicAuth。现在，我想通过jQuery调用PHP脚本。如果没有BasicAuth，它可以正常工作，但是在Basic Auth激活后，浏览器会显示一个登录提示——似乎Auth参数没有被正确传输？

我的JS代码：

    var username = [USER];
var password = [PASSWORD];
$.ajax
({
  type: "GET",
  url: "[URL]/[Script].php?callback=?",
  dataType: 'json',
  headers: {
    "Authorization": "Basic " + btoa(username +":"+ password)
  },
  success: function(result){
    alert('Yeah!');
  },
  error: function(er){
    alert('error!' +er);
  }
});

编辑后还是不起作用：

    $.ajax
({
  type: "GET",
  url: "[URL]/[Script].php?callback=?",
  dataType: 'json',
  async: false,
  xhrFields: {
    withCredentials: true
  },
  beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password));
  },
  success: function(result){
    alert("YEY");
  },
  error: function(er){
    alert('error!' +er);
  }
});

No Auth: http://fs5.directupload.net/images/161220/izy9yqdh.jpg

correct Auth: http://fs5.directupload.net/images/161220/nkh6ybts.jpg

direct php call: http://fs5.directupload.net/images/161220/xvo4rry9.jpg

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

你提供的信息让我理解了你的问题。在你的Ajax请求中，Authorization头的值是正确的，但是headers对象并没有包含这个头。

你应该这样修改你的headers对象：

$.ajax
{
  ...
  headers: { Authorization: "Basic " + btoa(username + ":" + password) },
  ...
}

这将使Authorization头被设置为Basic 前缀加上用户名和密码的Base64编码字符串。

至于错误处理部分，你可以根据你的需求来调整。如果你想要在错误发生时显示警告消息，你可以这样做：

error: function(err, jqXHR, settings)
{
  alert('Error! Message from server: ' + err.responseText);
},

或者，如果你希望显示错误的具体内容，你可以添加更多的信息到你的回调函数中：

error: function(err, jqXHR, settings)
{
  var message = '';
  if (jqXHR.status === 401) {
    message = 'Unauthorized. Please check your credentials.';
  } else if (jqXHR.status === 403) {
    message = 'Forbidden. Access is denied.';
  }

  alert(message);
},

注意：在实际应用中，请确保用户输入的数据（例如用户名和密码）经过安全处理，并且不包含敏感信息。