调用quiz API时curl请求正常但fetch返回JSON解析错误如何解决？

问题诱因 #

• 第一版代码的核心问题是请求方法和参数传递方式和curl逻辑完全不匹配：你用到的curl -G 参数的作用是强制将 -d 指定的参数作为GET请求的查询参数拼接在URL末尾，整个请求是GET类型；但第一版JS代码用了POST方法，还把apiKey放在请求体中，API不支持该接口的POST调用，返回了HTML格式的错误页面，你尝试把HTML内容解析为JSON时，就会遇到开头的<字符触发语法错误。
• 第二版代码仍出错的常见原因有两个：一是apiKey变量未正确赋值、为空或值无效，API返回401未授权的HTML错误页；二是没有对响应做合法性校验，直接对错误响应调用json()方法。

修复方案 #

方案1：完全对齐curl的请求逻辑（推荐，和你已验证的curl行为一致） #

将apiKey作为GET查询参数拼接在请求URL上，无需额外设置请求头：

const apiKey = "你的实际有效apiKey";
fetch(`https://quizapi.io/api/v1/questions?apiKey=${encodeURIComponent(apiKey)}`)
  .then(res => {
    // 先校验响应状态是否正常
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求出错：', err));

方案2：使用请求头传递API密钥 #

按照quizapi.io的规则，也可以通过X-Api-Key请求头传值，注意必须保证apiKey变量是有效值：

const apiKey = "你的实际有效apiKey";
fetch('https://quizapi.io/api/v1/questions', {
  headers: {
    'X-Api-Key': apiKey
  }
})
  .then(res => {
    if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`);
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error('请求出错：', err));

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