JavaScript新手求助：调用Cisco Meraki API跨域及代码问题排查

首先，咱们来拆解你遇到的问题，一步步解决：

核心问题：跨域请求被拦截 #

你看到的XHR failed loading: OPTIONS错误，是浏览器的同源策略导致的。简单说，浏览器不允许前端页面直接请求其他域名的接口，除非目标服务器明确通过Access-Control-Allow-Origin这类响应头允许你的域名访问。

而且你代码里加的Access-Control-Allow-Origin、Access-Control-Allow-Headers这些头，是服务器返回给浏览器的响应头，不是前端请求时要设置的——你现在在请求里加这些完全没用，反而可能干扰浏览器的预请求处理。Meraki的API大概率没有配置允许前端跨域访问，所以直接前端请求肯定会失败。

代码里的其他小问题 #

除了跨域，你的代码还有几个细节错误：

1. txt变量没初始化，直接txt +=会导致结果开头出现undefined
2. 逻辑运算符写错了：this.readyState == 4 &&应该是原生JS的&&（&&是HTML转义后的字符）
3. onreadystatechange事件绑定在send()之后，可能错过请求完成的状态（虽然有时候能触发，但不规范）
4. 重复设置Access-Control-Allow-Headers头，完全没必要

解决方案：后端代理（推荐） #

因为需要API密钥的接口，绝对不能在前端直接请求（密钥会暴露给所有人），最稳妥的方式是用自己的后端做中间代理：

• 前端把API密钥和shard发送到你的后端接口
• 后端带着密钥去请求Meraki API，再把结果返回给前端

简单PHP代理示例 #

// proxy.php
header("Access-Control-Allow-Origin: https://your-frontend-domain.com"); // 生产环境换成你的前端域名
$apiKey = $_POST['apikey'];
$shard = $_POST['shard'];
$url = "https://{$shard}.meraki.com/api/v0/organizations";

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    "X-Cisco-Meraki-API-Key: {$apiKey}",
    "Content-Type: application/json"
]);

$response = curl_exec($ch);
curl_close($ch);

echo $response;

修正后的前端代码 #

function listOrgs() {
  var apikey = document.getElementById("apikeyinput").value;
  var shard = document.getElementById("shardinput").value;
  var xhttp, orgData, txt = "", x;
  var proxyURL = "proxy.php"; // 你的后端代理地址

  xhttp = new XMLHttpRequest();
  xhttp.open("POST", proxyURL, true);
  xhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  
  xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
      orgData = JSON.parse(this.responseText);
      txt += "<table border='1'>";
      // 修正表格结构：每个组织一行两列，不是两行
      for (x in orgData) {
        txt += "<tr><td>" + orgData[x].name + "</td><td>" + orgData[x].id + "</td></tr>";
      };
      txt += "</table>";
      document.getElementById("printOrgs").innerHTML = txt;
    } else if (this.readyState == 4) {
      // 打印错误信息方便排查
      console.log("请求失败，状态码：", this.status);
      console.log("响应内容：", this.responseText);
    }
  };

  // 发送编码后的表单数据
  xhttp.send("apikey=" + encodeURIComponent(apikey) + "&shard=" + encodeURIComponent(shard));

  console.log(apikey, shard);
}

额外提醒 #

• 永远不要在前端代码里直接暴露API密钥，哪怕是通过表单输入后直接请求，也会被开发者工具抓包获取到
• 生产环境一定要用HTTPS传输，避免密钥被明文窃取

内容的提问来源于stack exchange，提问作者David B