我正在尝试将Messenger Live客户聊天插件动态添加到网站，方法是首先通过API将域列入白名单，然后将脚本标记注入列入白名单的域网站。
现在，在将脚本注入白名单网站后，它失败了，并出现CORS错误。但是，如果我使用UI通过Facebook应用程序手动将URL列入白名单，效果会很好。我不明白为什么通过API的白名单不起作用，而文档明确表示它应该起作用。
- 通过API成功将FB页面的域列入白名单
curl 'https://graph.facebook.com/v12.0/me/messenger_profile?access_token=EAxxxxxxxPr'
-H 'authority: graph.facebook.com'
-H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"'
-H 'accept: application/json, text/plain, */*'
-H 'content-type: application/json'
-H 'sec-ch-ua-mobile: ?0'
-H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36'
-H 'sec-ch-ua-platform: "macOS"'
-H 'origin: https://livechat.frangout.com'
-H 'sec-fetch-site: cross-site'
-H 'sec-fetch-mode: cors'
-H 'sec-fetch-dest: empty'
-H 'referer: https://livechat.frangout.com/'
-H 'accept-language: en-GB,en-US;q=0.9,en;q=0.8'
--data-raw '{"whitelisted_domains":["https://my-domain.com"]}'
--compressed
结果：{success: true }和我也可以获得白名单域，并看到它已经是白名单
- 将脚本动态注入白名单网站，以便加载Messenger实时聊天插件
var fbCustomerChat = document.createElement('div');
fbCustomerChat.id = "fb-customerchat";
fbCustomerChat.classList.add("fb-customerchat");
fbCustomerChat.setAttribute('page_id', 'xxx')
document.body.appendChild(fbCustomerChat);
window.fbAsyncInit = function() {
FB.init({
appId : 'xxx',
autoLogAppEvents : true,
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'));
- 浏览器日志
Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1' from origin 'https://sid-s-school-12f2.thinkific.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr-patch.js:87 GET https://www.facebook.com/plugins/customer_chat/facade_gating/?page_id=106040728582517&suppress_http_code=1 net::ERR_FAILED 200
Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/SDK/trucnated co
Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://www.facebook.com".
这可能是另一个问题。但我也遇到了。。已被CORS针对Facebook插件聊天的政策问题阻止。即使你已经在白名单域(高级消息设置(中添加了网站URL，如果你的Facebook页面被限制或仅限于少数国家，它仍然无法工作。它需要向所有国家提供。
希望将来有人能帮助这篇帖子，因为搜索"Facebook聊天助手错误"只会指向这个问题。
我在facebook上遇到了这个问题，在我的情况下，我的白名单域名末尾有一个/，更新它解决了我的问题。
还将Facebook聊天SDK代码移动到body-tag的顶部
<body>
<!-- FB-CHAT-SDK-CODE -->
...
<!-- your code -->
...
</body>
OLD: https://www.example.com/
NEW: https://www.example.com
希望这能帮助
我以前也经历过同样的事情，在我彻底检查后，发现我输入了错误的PAGE_ID，而我输入了APP_ID。
你可以试着在这条线上再次检查
chatbox.setAttribute("page_id", **YOUR_PAGE_ID**);
默认情况下，facebook需要在html:中添加以下代码
<!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>
<!-- Your Chat plugin code -->
<div id="fb-customer-chat" class="fb-customerchat"></div>
您错过了fb-rootdiv和聊天插件的id是fb-customer-chat而不是fb-customerchat