如何修复 Facebook 客户聊天中被 CORS 策略阻止的对 XMLHttpRequest 的访问?

How to fix access to XMLHttpRequest blocked by CORS policy in Facebook customer chat?

提问人:kathdroid 提问时间:11/9/2023 最后编辑:kathdroid 更新时间:11/9/2023 访问量:32

问:

我已经在我原本空白的页面上添加了由 Facebook 向导生成的客户聊天插件代码。

<div id="fb-root"></div>

<!-- Your Customer chat code -->
<div id="fb-customer-chat" class="fb-customerchat">
</div>

<script>
  var chatbox = document.getElementById('fb-customer-chat');
  chatbox.setAttribute("page_id", "<my_page_id>");
  chatbox.setAttribute("attribution", "biz_inbox");
</script>

<!-- Your SDK code -->
<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml            : true,
      version          : 'v18.0'
    });
  };

在插件设置中,我提供了带有 https 协议的正确域。 我还为该页面将该域列入白名单。 我没有国家或年龄限制。 聊天加载并似乎正常工作。 但是几分钟后,我在浏览器控制台中收到了数百个错误。我尝试了不同的浏览器。

Access to XMLHttpRequest at 'https://www.facebook.com/plugins/customer_chat/SDK/?app_id=&attribution=biz_inbox&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df3fe72899833244%26domain%3Dexample.com%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fexample.com%252Ff10aab675045618%26relation%3Dparent.parent&current_url=https%3A%2F%2Fexample.com%2Fchat&event_name=chat_plugin_sdk_facade_create&is_loaded_by_facade=true&loading_time=0&locale=en_US&log_id=f260da64-ca87-437c-a5bd-dfaa5803919b&page_id=<page_id>&request_time=1699479661195&sdk=joey&should_use_new_domain=false&suppress_http_code=1' from origin 'https://example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xfbml.customerchat.js:148 
        
        
GET https://www.facebook.com/plugins/customer_chat/SDK/?app_id=&attribution=biz_inbox&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Df3fe72899833244%26domain%3Dexample.com%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fexample.com%252Ff10aab675045618%26relation%3Dparent.parent&current_url=https%3A%2F%2Fexample.com%2Fchat&event_name=chat_plugin_sdk_facade_create&is_loaded_by_facade=true&loading_time=0&locale=en_US&log_id=f260da64-ca87-437c-a5bd-dfaa5803919b&page_id=<page_id>&request_time=1699479661195&sdk=joey&should_use_new_domain=false&suppress_http_code=1 net::ERR_FAILED 400 (Bad Request)

我不知道我还能做些什么来解决这个问题。

facebook cors http-headers facebook-javascript-sdk facebook-customer-chat

评论

0赞 kathdroid 11/10/2023
在我的问题中,我使用 Facebook javascript SDK。我不控制 Facebook 服务器,也不会在客户端创建这些 http 请求,它们来自从 Facebook 动态下载的 Facebook 脚本,因此我无法通过 CORS 代理重定向它们或更改它们。
0赞 jub0bs 11/10/2023
真。错误的重复目标。但答案是,如果您不控制服务器,并且没有针对 CORS 进行配置,您将无法直接从基于浏览器的客户端使用它。
0赞 kathdroid 11/10/2023
这是一个流行的 Facebook 插件,因此不太可能有缺陷。我怀疑我做错了什么,我只是不知道是什么。奇怪的是,尽管存在这些错误,但聊天似乎可以正常工作。

答: 暂无答案