jQuery、HTTPS 和 WooCommerce API : Error 401

Question

我正在尝试使用基于 HTTPS 的基本身份验证来使用 jQuery 从同源(本地主机)调用 WooCommerce API。服务器是 Windows 上的 XAMPP。我使用的是自签名证书(CN=localhost)。当我访问网站的其余部分时，证书不会发出警告。我尝试将证书添加为受信任的根证书颁发机构。我什至允许 chrome://flags/#allow-insecure-localhost(即使证书有效)。我一直收到“401 Unauthorized”。

var username = "ck_????????????????????????????????????????";
var password = "cs_????????????????????????????????????????";
var up = username + ":" + password;
var authHeader = "Basic " + btoa(username + ":" + password);

WooClient.prototype.getProducts = function () {
    return $.ajax({
        url: "/myshop/wp-json/wc/v1/products",
        type: "get",
        dataType: "json",
        xhrFields: {
            withCredentials: true
        },
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Authorization", authHeader);
            return true;
        }
    }).then(function (data) {
        return data;
    });
};

使用 Advanced Rest Client 执行的相同请求返回“200 OK”并在正文中返回所需的结果。

Answer 1

我遇到了同样的问题。还注意到它在 Edge 中有效，但在 Chrome 中无效。在我尝试将配置剥离到最低限度后，由于某种原因它突然开始工作。在进一步挖掘之后，似乎每当您登录到同一站点时就会发生这种情况。

$.ajax({
  url: "/wp-json/wc/v1/products",
  beforeSend: function(xhr) { 
    xhr.setRequestHeader("Authorization", "Basic " +btoa(username+':'+password)); 
    return true; 
  }
});

当然，将您的 API key 暴露给浏览器是一个非常糟糕的主意，如果您将其用于重要的事情:)