FB聊天插件部署触发CORS策略错误、customerchat net::ERR_FAILED求助

问题背景 #

在页面<body>标签内部署FB客户聊天插件后，触发CORS策略错误，同时返回customerchat net::ERR_FAILED报错，已完成FB Advanced Messaging后台域名白名单配置，未排查出代码遗漏。

部署代码 #

<div id="fb-root"></div>
<div id="fb-customer-chat" class="fb-customerchat">
</div>
<script>
  var chatbox = document.getElementById('fb-customer-chat');
  chatbox.setAttribute("page_id", "YOURPAGEIDHERE");
  chatbox.setAttribute("attribution", "biz_inbox");

  window.fbAsyncInit = function() {
  FB.init({
    xfbml            : true,
    version          : 'v12.0'
  });
  };

  (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/xfbml.customerchat.js';
  fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));
</script>

报错截图 #

#

排查步骤 #

• 首先升级废弃的SDK版本：当前使用的v12.0版本早已被Meta停止支持，旧版本的SDK资源存在跨域访问限制，将FB.init中的version参数替换为v19.0及以上的官方最新正式版本即可。
• 校验域名白名单配置准确性：
  • 白名单必须填写完整协议头，例如https://你的域名.com，不可只填写域名主体
  • 不可携带路径后缀，仅填写到根域名层级即可
  • 确认当前访问的域名与白名单完全一致，包括www前缀差异，例如白名单配置了无www的域名，访问带www的站点也会触发跨域报错
  • 本地调试场景需要将本地地址加进白名单，例如http://localhost:3000
• 排查网络与浏览器拦截问题：
  • 广告拦截、隐私防护类浏览器扩展会主动拦截Facebook相关SDK请求，可先禁用所有扩展、开启无痕模式测试
  • 若在中国大陆境内网络环境测试，Facebook资源本身无法正常访问，也会触发该报错，需要切换至境外网络验证
• 代码配置校验：
  • 确认代码中YOURPAGEIDHERE已替换为真实有效的Facebook公共主页ID，无效ID会触发SDK加载异常
  • 不要给fb-root、fb-customer-chat元素添加display: none类的隐藏样式，会导致SDK初始化失败
  • 确认整段代码部署在<body>标签内部，不要放在<head>标签中，避免DOM元素未渲染就执行JS逻辑引发报错

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