当CDN服务不可用时，前端有什么解决办法

现在前端主流的部署方式基本都是把静态资源打包上传至CDN服务器，可能还会引用一些在线公共资源库。这都可能会存在一种问题：如果CDN服务器挂了，就会导致页面访问不了。笔者在之前的工作中就遇到过第三方资源公共CDN服务器挂掉的问题，当时的临时解决方法是修改地址，重新发布，期间存在一定时间内不可用状态。对于中小型公司来说，系统少的还好，对于系统多的改起来可费劲了。

那么从前端角度来看，有没有什么比较好的解决思路呢？

其实思路很简单，就是在当前静态资源加载失败时自动换到另一个地方重新加载该资源。基于这种思路，我们可以把静态资源上传到多个CDN服务器上，一个作为主要使用，一个作为备份使用，让不同CDN服务，请求路径相同。这里以CDN A为主域名使用，以CDN B为备份域名使用为例。

当js、css资源加载失败时，会触发 onerror 事件，我们可以给所有的 script 和 link 标签加上一个 onerror 事件 onCdnError ，然后在 window 中定义全局的 onCdnError 事件，然后在自定义事件中获取当前资源失败的链接，替换成备用cdn地址，重新加载一次资源即可。

主要实现逻辑：

// 静态资源对应的链接
var staticMap = {
  link: "href",
  script: "src",
};
// <link onerror="onCdnError(this)" href="https://cdn-a.com/index.css" rel="stylesheet"/>
// <script onerror="onCdnError(this)" href="https://cdn-a.com/index.js"></script>
window.onCdnError = function (e) {
  const nodeName = e.nodeName.toLowerCase();
  const srcName = staticMap[nodeName];
  if (!srcName) {
    return;
  }
  // 获取当前加载失败的链接
  let link = e[srcName];
  if (!link) return;
  if (link.includes("cdn-a.com")) {
    link = link.replace("cdn-a.com", "cdn-b.com");

    // 创建script或者link标签，插入到head中
    const head = document.head || document.getElementsByTagName("head")[0];
    const el = document.createElement(nodeName);
    if (el === "link") {
      el.rel = "stylesheet";
    }
    el[srcName] = link;
    el.onerror = function () {
      window.onCdnError(el);
    };
    el.setAttribute("crossorigin", "anonymous");
    head.appendChild(el);
  } else {
    // 可能已经是cdn-b了，此时cdn b也已经挂了，可以做一些提示处理
    // ...do something
  }
};