使用JavaScript携带X-Auth-Token访问JSON端点报错如何解决

你的代码没有明显逻辑错误，但是踩了浏览器请求规范和API调用的隐性规则，核心问题有3个：

• 用了已被规范废弃的同步XMLHttpRequest：xhr.open第三个参数传false代表同步请求，该模式在跨域场景下会被所有现代浏览器直接拦截，且目标体育API本身就不支持同步跨域调用，同时同步请求会阻塞页面主线程，本身就不推荐使用。
• 缺少请求状态校验逻辑：你没有判断HTTP响应状态就直接执行JSON.parse(xhr.responseText)，只要请求因为权限不足、额度耗尽、跨域拦截等原因返回非JSON格式内容，这行代码会直接抛语法错误，完全掩盖真实的故障原因。
• 没有适配自定义头的跨域预检流程：你携带的X-Auth-Token属于自定义请求头，跨域场景下浏览器会先发送OPTIONS方法的预检请求校验权限，同步XHR模式不会正常处理预检流程，会直接被浏览器安全策略拦截。

可直接运行的修复代码 #

const main = async function () {
  const apiUrl = "https://api.football-data.org/v4/teams/86/matches?status=SCHEDULED";
  try {
    const res = await fetch(apiUrl, {
      method: "GET",
      headers: {
        "X-Auth-Token": "601a163917fe417da759316ced98462d"
      }
    });
    // 先处理错误响应，打印真实报错信息
    if (!res.ok) {
      const errMsg = await res.text();
      throw new Error(`请求异常，状态码：${res.status}，详情：${errMsg}`);
    }
    const matchData = await res.json();
    return matchData;
  } catch (err) {
    console.error("接口调用失败：", err);
    throw err;
  }
};

// 调用示例
main().then(data => {
  console.log("获取到的赛程数据：", data);
});

后续排查指引 #

如果替换代码后仍报错，按以下顺序排查：

• 报错为401/403：登录API服务商后台确认Token是否有效、免费调用额度是否耗尽、是否配置了IP/来源限制
• 报错为跨域相关：不要用file://协议直接打开本地HTML文件，用本地静态服务（比如VSCode的Live Server插件）启动页面后调试，该API的免费版默认配置了跨域允许头，正常前端调用不会有跨域限制
• 不要在公开可访问的前端代码、公共代码仓库中明文暴露你的API Token，避免被他人盗用刷完调用额度

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