0

I have added customer chat plugin code generated by Facebook wizard on my otherwise empty page.

<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'
    });
  };

In the plugin settings I have provided correct domain with https protocol. I also whitelisted that domain for the page. I have no country or age restrictions. The chat loads and seems to work correctly. But after a few minutes I am getting hundreds of errors in my browser console. I tried different browsers.

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)

I don't know what else I can do to troubleshoot this problem.

3
  • In my problem I use Facebook javascript SDK. I do not control Facebook server and I do not create those http requests on client side, they come from Facebook scripts downloaded dynamically from Facebook, so I cannot redirect them through CORS proxy or change them.
    – kathdroid
    Nov 9 at 18:44
  • True. Wrong duplicate target. But the answer is that, if you don't control the server and it isn't configured for CORS, you won't be able to directly consume it from a browser-based client.
    – jub0bs
    Nov 9 at 19:19
  • This is a popular Facebook plugin, so it is unlikely that it is flawed. I suspect I'm doing something wrong, I just don't know what. And it is strange that despite those errors the chat seems to work properly.
    – kathdroid
    Nov 9 at 23:47

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.