現在陪玩平臺原始碼前端主流的部署方式基本都是把靜態資源打包上傳至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="
// <script onerror="onCdnError(this)" href="
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
  }
};

以上就是“當陪玩平臺原始碼中的CDN服務不可用時，有什麼解決辦法”的全部內容，是不是看起來並不難，希望對大家開發陪玩平臺原始碼有幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
原文連結：https://www.yuque.com/xinconan/blog/cdn-error?hmsr=toutiao.io&utm_campaign=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

陪玩平臺原始碼中的CDN服務不可用時的解決辦法

相關文章