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

Posted 2023-02-23

技术标签:

【中文标题】CORS 策略和 customerchat net::ERR_FAILED 上的 FB 聊天插件错误【英文标题】：FB chat plugin error on CORS policy and customerchat net::ERR_FAILED 【发布时间】：2021-10-06 07:27:15 【问题描述】：

我在正文中执行以下代码时出错：

<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 中的域列入白名单。我不确定我是否遗漏了代码中的其他内容。

【问题讨论】：

您的推荐人策略设置为什么？ developers.facebook.com/docs/messenger-platform/discovery/… 我在检查网络标头的页面上获得了以下信息。我正在检查它是否可以通过 html 或其他方式修复它..有什么帮助吗？ Referrer Policy: strict-origin-when-cross-origin 这仍然应该发送引荐来源网址的来源部分，所以这可能没问题。（您可以检查是否确实使用 iframe 请求发送了引荐来源网址。）是的，我的意思是 fb 客户聊天仍然有效，即使他们有这样的错误。我只是想知道如何解决它。:) 【参考方案1】：

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

转到配置插件面板>配置并添加您的域。

【讨论】：

【参考方案2】：

Facebook requirements 之一是拥有一个 HTTPS 域。不接受 HTTP。

【讨论】：

【参考方案3】：

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

所以我遵循的步骤是-

1）在 buisness.facebook.com 中，从侧边栏转到收件箱并选择聊天插件。[https://i.stack.imgur.com/rDk5d.png]

2) 单击设置以添加您的域。 [https://i.stack.imgur.com/exOi2.png]

3) 选择一个设置方法（react/nextjs 的标准）和设置聊天插件（添加语言，域，复制代码并粘贴它） [https://i.stack.imgur.com/hDArZ.png]