React应用依赖的Facebook JS脚本突发全浏览器拦截，如何解决？

我的React应用高度依赖Facebook SDK，此前通过以下代码初始化该SDK已稳定运行超1年：

export function initFacebookSdk() {
    return new Promise(resolve => {
        window.fbAsyncInit = function () {
            window.FB.init({
                appId: facebookAppId,
                cookie: true,
                xfbml: true,
                version: 'v13.0'
            });
            window.FB.getLoginStatus(({ authResponse }) => {
                if (authResponse) {
                    //Do something
                } else {
                    resolve();
                }
            }, true);
        };
        // load facebook sdk script
        (function (d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/en_US/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    });
}

但几分钟前，生产环境及本地环境的网站突然无法加载，控制台报错：

The resource from “https://connect.facebook.net/en_US/sdk.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

解决方法 #

• 指定SDK版本号加载：直接请求无版本的sdk.js可能被重定向到HTML错误页，给链接加上版本号即可，修改js.src为：

  js.src = "https://connect.facebook.net/en_US/sdk.js?v=v13.0";
  

  同时确保FB.init里的version字段和链接版本一致。

• 检查Facebook服务状态：这类突发全局问题大概率是Facebook服务端故障，先确认官方是否有SDK相关的服务中断，等待官方修复是最直接的方式。

• 切换SDK版本：如果当前v13.0版本存在问题，尝试切换到其他稳定版本（比如v12.0或v14.0），同步修改初始化代码里的version字段和SDK链接的版本号。

• 添加加载重试逻辑：给脚本加载添加错误监听，失败后自动重试，避免单次加载失败导致页面卡死：

  // 修改加载脚本部分
  (function (d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement(s); js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js?v=v13.0";
      // 错误重试
      js.onerror = function() {
          setTimeout(() => {
              js.remove();
              js = d.createElement(s);
              js.id = id;
              js.src = "https://connect.facebook.net/en_US/sdk.js?v=v13.0";
              fjs.parentNode.insertBefore(js, fjs);
          }, 3000);
      };
      fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
  

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