Question

我是javascript的新手。我试图使用XMLHttpRequest从Cisco Meraki的API获取信息。我没有收到我希望收回的结果，这将是我们安装了Meraki设备的组织列表。我在某处读到XMLHttpRequests不适用于跨域访问，所以如果我应该使用其他东西，请告诉我。我也很可能在代码中出现了一些错误。

我已经看过很多与API交谈的例子，但是没有，我发现处理将一个独特的API密钥从用户输入传递到表单中的get语句。我在函数的底部添加了console.log（），以确保我的变量从调用此函数的html表单获取值，并且它们是。

以下是我在运行该功能后在浏览器中看到的错误：

XMLHttpRequest {onreadystatechange：ƒ，readyState：1，timeout：0，withCredentials：false，upload：XMLHttpRequestUpload，...} addAdmin.php：62 XHR加载失败：OPTIONS“https://n159.meraki.com/api/v0/organizations”。 listOrgs @ addAdmin.php：62 onclick @ addAdmin.php：43 addAdmin.php：62 XHR加载失败：OPTIONS“https://n159.meraki.com/api/v0/organizations”。

这是我的代码：

function listOrgs() {
    var apikey = document.getElementById("apikeyinput").value;
    var shard = document.getElementById("shardinput").value;
    var xhttp, orgData, txt, x, dbParam, fullURL = "";
    fullURL = "https://" + shard + ".meraki.com/api/v0/organizations";
    xhttp = new XMLHttpRequest();
    xhttp.open("GET", fullURL, true);
    xhttp.setRequestHeader("Access-Control-Allow-Origin", "Content-Type");
    xhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type");
    xhttp.setRequestHeader("Access-Control-Allow-Headers", "Content-Type, X-
    Requested-With");
    xhttp.setRequestHeader("X-Cisco-Meraki-API-Key", apikey);
    xhttp.setRequestHeader("Content-Type", "application/json");
    xhttp.send();
    xhttp.onreadystatechange = function writeTable() {
      if(this.readyState == 4 && this.status == 200) {
        orgData = JSON.parse(this.responseText);
        txt += "<table boarder='1'>";
        for (x in orgData) {
          txt += "<tr><td>" + orgData[x].name + "</td></tr>";
          txt += "<tr><td>" + orgData[x].id + "</td></tr>";
        };
        txt += "</table>"
        document.getElementById("printOrgs").innerHTML = txt;
      };
    }

    console.log(fullURL);
    console.log(apikey);
    console.log(shard);
    console.log(xhttp);
}

Answer 1

您的浏览器抱怨OPTIONS听起来像飞行前请求失败了。我以前从未使用过这个API，所以我不知道这些是否会解决这个问题，但这里有一些一般的提示......

将onreadystatechange放在send之前，这样就不会有竞争条件。
Access-Control-Allow-Origin是一个回复标题，而不是请求标题，它将一个网址作为参数，而不是单词“内容类型”。删除它。
Access-Control-Allow-Headers也是一个回复标题，请将其删除，然后尝试将其替换为对应的请求标题，对应方：Access-Control-Request-Headers Read here以查看其工作原理。
您的Content-Type标题告诉服务器需要一些JSON数据，但您没有发送任何内容，更不用说JSO了。

这里要带走的主要事情是，了解响应标头和请求标头之间的区别，并确保您知道它们的含义。

Meraki API和javascript

1 个答案: