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