远程script标签onerror如何获取详细错误信息？

原生<script>标签的onerror事件受同源策略和安全机制限制，无法直接返回“connection refused”“subresource integrity check failed”这类具体错误详情——浏览器只会提供通用事件对象，避免泄露服务器或网络敏感信息。要实现精准的错误反馈，可以参考以下方案：

1. 用Fetch API预检测资源状态 #

先通过Fetch请求脚本资源，借助完整的Response对象判断错误类型，验证通过后再动态插入script标签：

示例代码 #

<html><body>
<script>
async function loadRemoteScript(url, integrity = '') {
  try {
    // 发起请求检测资源可用性
    let response = await fetch(url, {
      mode: 'cors', // 跨域资源需服务器开启CORS支持
      cache: 'no-cache'
    });

    if (!response.ok) {
      // 根据HTTP状态码生成具体错误信息
      let errorMsg;
      switch (response.status) {
        case 404:
          errorMsg = '请求的脚本资源不存在（404）';
          break;
        case 500:
          errorMsg = '服务器内部错误，无法加载脚本（500）';
          break;
        case 403:
          errorMsg = '无权限访问该脚本资源（403）';
          break;
        default:
          errorMsg = `脚本请求失败，状态码：${response.status}`;
      }
      throw new Error(errorMsg);
    }

    // 若配置了SRI，手动校验资源完整性
    if (integrity) {
      const resourceText = await response.text();
      const [algorithm, expectedHash] = integrity.split('-');
      
      // 计算资源哈希值
      const encoder = new TextEncoder();
      const data = encoder.encode(resourceText);
      const digest = await crypto.subtle.digest(algorithm.toUpperCase(), data);
      const actualHash = btoa(String.fromCharCode(...new Uint8Array(digest)));

      if (actualHash !== expectedHash) {
        throw new Error('子资源完整性校验失败');
      }
      // 校验通过后重新发起请求（原response已被读取）
      response = await fetch(url, { mode: 'cors', cache: 'no-cache' });
    }

    // 动态创建并插入script标签
    const script = document.createElement('script');
    script.src = url;
    if (integrity) {
      script.integrity = integrity;
      script.crossOrigin = 'anonymous';
    }
    document.body.appendChild(script);

  } catch (err) {
    // 向用户展示具体错误
    console.error('脚本加载失败:', err.message);
    // 可替换为页面内的提示元素，比如：
    // document.getElementById('error-tip').textContent = `加载失败：${err.message}`;
    alert(`脚本加载失败：${err.message}`);
  }
}

// 调用加载函数
loadRemoteScript('http://localhost:55555');
</script>
</body></html>

2. 跨域场景的兼容处理 #

如果远程脚本服务器未配置CORS，Fetch请求会被浏览器拦截，此时可以：

• 结合setTimeout判断超时情况（比如超过5秒未加载完成，推测为连接拒绝或网络异常）
• 保留原onerror事件，同时补充超时逻辑，给出“脚本加载超时或失败”这类相对具体的提示

3. SRI校验失败的特殊判断 #

若script标签配置了integrity属性，校验失败时onerror会触发但无具体信息。此时可以结合Fetch结果：如果Fetch请求成功但script加载失败，大概率是SRI校验不通过，可在错误处理中补充该类提示。

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