调用Avascan API获取数据渲染到HTML页面失败，请问如何解决？

核心问题定位 #

• 接口返回字段结构匹配错误：你调用的Avascan统计接口返回的blockchains、validators字段是嵌套在stats对象下的，直接从接口返回的顶层对象解构拿不到对应值，这是最直接的报错原因
• 缺失错误处理逻辑：当前代码没有对请求异常、HTTP错误、字段不存在的情况做捕获，无法定位具体报错点
• 跨域限制：Avascan公开API未配置面向第三方前端域名的CORS头，浏览器同源策略会直接拦截前端直接发起的请求
• 请求频率过高：1秒一次的刷新频率会触发接口限流规则，导致请求被拒绝

解决方案 #

1. 适配正确的返回结构，添加错误捕获 #

修正后的JS代码如下：

const api_url = 'https://avascan.info/api/v1/home/statistics';

async function getAVA() {
  try {
    const response = await fetch(api_url);
    // 先判断HTTP请求是否成功
    if (!response.ok) {
      throw new Error(`请求错误：${response.status}`);
    }
    const data = await response.json();
    // 从stats字段下取对应值
    const { blockchains, validators } = data.stats;
    document.getElementById('blockchains').textContent = blockchains;
    document.getElementById('validators').textContent = validators;
  } catch (err) {
    // 可在控制台查看具体报错信息定位问题
    console.error('获取数据失败：', err);
  }
}

getAVA();
// 调整为30秒刷新一次，避免触发限流
setInterval(getAVA, 30000);

2. 适配HTML代码（移除无意义的度符号，调整ID语义） #

<h1>链上统计数据</h1>

<p>
  区块链数量：<span id="blockchains"></span><br />
  验证节点数量：<span id="validators"></span>
</p>

<div id="issMap"></div>

3. 解决跨域问题 #

• 本地开发阶段：给开发工具配置代理转发，比如Vite在vite.config.js中配置server.proxy，Webpack在devServer中配置proxy，把API请求转发到Avascan域名即可绕过CORS限制
• 生产部署阶段：在你自己的后端服务加一层接口转发，前端请求你自己的后端接口，再由后端请求Avascan接口返回数据，即可解决跨域问题

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