CORS 策略和 customerchat net 上的 FB 聊天插件错误::ERR_FAILED

Question

我在正文中实现以下代码时出错：

<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>

错误：

我已经将 FB Advanced Messaging 中的域列入白名单。我不确定我是否遗漏了代码中的其他内容。

Answer 1

我也收到这个错误。我发现pageId我使用的是错误的。仅当您的pageId错误或域未正确列入白名单时才会出现这些错误（我什至尝试使用 ngrok url 并且它有效）。

所以我遵循的步骤是：

1. 在business.facebook.com 中，从侧边栏转到收件箱并选择聊天插件。

2. 单击设置以添加您的域。

3. 选择一种设置方法（react/nextjs 的标准）并设置聊天插件（添加语言、域名、复制代码并粘贴）

4. 您可以添加多个域

5. 您将pageId已经嵌入

使用此代码并将其粘贴到_document.js文件中nextjs，部署后它将完美运行。如果有任何困惑，请告诉我。

谢谢，快乐编码

Answer 2

在设置页面 > 高级消息 > 白名单域中。添加您的域名。验证您的域是否为 https 或 http。

进入配置插件面板 > 配置并添加您的域后。