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

yc0p9oo0  于 2023-06-28  发布在  Java
关注(0)|答案(5)|浏览(121)

我得到了一个错误实现下面的代码内的身体:

<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高级消息中的域列入白名单。我不确定我是否错过了代码中的其他内容。

k4aesqcs

k4aesqcs1#

在设置页面>高级消息>白名单域。添加您的域名。验证您的域是https还是http。
之后转到配置插件面板>配置并添加您的域。

xxe27gdn

xxe27gdn2#

我也收到了这些错误。我发现我使用的pageId是错误的♀。这些错误只出现在你的pageId是错误的或者域名没有正确的白名单(我甚至尝试了ngrok url和它的工作)。🤦‍️😵
所以我遵循的步骤是-
1)在www.example.com从侧边栏进入收件箱,选择聊天插件。buisness.facebook.com
2)单击设置以添加您的域。

3)选择一个设置方法(react/nextjs标准)和设置聊天插件(添加语言,域,复制代码并粘贴)

4)您可以添加多个域名[https://i.stack.imgur.com/zGdgx.png]
5)您将获得已嵌入的pageId

使用此代码并将其粘贴到nextjs中的_document.js文件中。部署之后,它将完美地工作。如有任何困惑,请让我知道。谢谢,快乐编码

5t7ly7z5

5t7ly7z53#

其中一个Facebook requirements是要有一个HTTPS域。HTTP将不被接受。

luaexgnf

luaexgnf4#

我遇到了同样的错误,除了白名单域,我删除了年龄/国家限制,它的工作原理。
文档:https://developers.facebook.com/docs/messenger-platform/discovery/facebook-chat-plugin/?locale=en_US

ckocjqey

ckocjqey5#

将你的域名列入facebook白名单应该可以解决这个问题。
您可以在页面设置>新页面体验>高级消息>白名单域名中找到它
view image
另外,如果你只输入yourdomain.com而不输入'www',它仍然不会工作,你可以通过将这行代码添加到你的.htaccess文件来绕过它。

RewriteEngine on
RewriteCond %{HTTP_HOST} !^www\.
RewriteCond %{HTTPS}s on(s)|offs()
RewriteRule ^ http%1://www.%{HTTP_HOST}%{REQUEST_URI} [NE,L,R]

这会将非www输入重定向到www

相关问题