Question 5214 in Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Cors error while rendering FB Chat plugin for whitelisted domains

I am trying to add the Messenger Live Customer Chat Plugin dynamically to a site by first whitelisting the domain via the API and then injecting the script tag to the whitelisted domain site.

Now, after injecting the script to the whitelisted site it fails with CORS error. But, if I manually whitelist the URL via the Facebook app using the UI it works fine. I dont understand why does whitelisting via API does not work when the docs clearly say it should work.

  1. Successfully whitelisting a domain for a FB page via the API
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

Result: {success: true } and I can also GET the whitelisted_domains and see it is already whitelisted

  1. Injecting script dynamically to the whitelisted site so that it loads the Messenger Live Chat Plugin
        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'));
  1. Browser Logs

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

4

Answers


  1. 0

    This might be a different issue. But I also encountered the ‘..has been blocked by CORS policy’ issue for the Facebook Plugin Chat. Even if you already added the website URL in the Whitelisted domains (Advanced Messaging settings), it will still not work if your Facebook page is limited or restricted to only few countries. It needs to be available to all countries.

    Hopefully someone will help this post in the future as searching for ‘Facebook Chat Cors error’ only points to this question.

    Login or Signup to reply.
  2. 0

    I experienced the same thing before, after I checked thoroughly, it turns out that I entered the wrong PAGE_ID instead I entered the APP_ID.

    You can try to check again on this line

    chatbox.setAttribute("page_id", **YOUR_PAGE_ID**);
    Login or Signup to reply.
  3. 0

    By default facebook need add following code into html:

    <!-- Messenger Chat plugin Code -->
<div id="fb-root"></div>

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

    You missed fb-root div and Chat plugin’s id is fb-customer-chat not fb-customerchat

    Login or Signup to reply.
  4. 0

    I had this issue from facebook, in my case I had a / at the end of my whitelisted domain name, updating it fixed my issue.

    Also move the Facebook chat SDK code to the top within the body-tag

    <body>
<!-- FB-CHAT-SDK-CODE -->
...

<!-- your code -->
...
</body>

    OLD: https://www.example.com/
NEW: https://www.example.com

    Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search