为白名单域呈现 FB Chat 插件时出现 Cors 错误

Question

我正在尝试将 Messenger 实时客户聊天插件动态添加到站点，方法是首先通过 API 将域列入白名单，然后将脚本标记注入白名单域站点。

现在，将脚本注入白名单站点后，它会失败并出现 CORS 错误。但是，如果我使用 UI 通过 Facebook 应用程序手动将 URL 列入白名单，则效果很好。我不明白为什么当文档明确表示它应该起作用时，通过 API 进行白名单却不起作用。

1. 通过 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 }我还可以获取whitelisted_domains并看到它已经列入白名单

2. 将脚本动态注入白名单站点，以便加载 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'));

3. 浏览器日志

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

Answer 1

这可能是一个不同的问题。但我也遇到了 Facebook 插件聊天的“..已被 CORS 策略阻止”问题。即使您已将网站 URL 添加到白名单域（高级消息设置）中，如果您的 Facebook 页面仅限于或仅限于少数国家/地区，它仍然无法工作。它需要向所有国家开放。

希望将来有人能帮助这篇文章，因为搜索“Facebook Chat Cors error”只能指出这个问题。