Facebook Messenger Chat throws CORS errors, conflicts with Facebook Login

Question

We have integrated the Facebook Messenger chatbot, and it seems to be working, but there are two issues:

1. it throws CORS errors like:Access to XMLHttpRequest at

   'https://www.facebook.com/plugins/customer_chat/SDK/?app_id=&attribution=page_inbox&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3FBUNCH OF STUFF sdk=joey&should_use_new_domain=false&suppress_http_code=1' from origin 'https://www.grandrapidshomeinfo.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

2. It conflicts with Facebook login, throwing the error

   FB.login() called before FB.init().
   

I have this code in the header:

 <!-- Messenger Chat Plugin Code -->
 <div id="fb-root"></div>
  <script>
    window.fbAsyncInit = function() {
      FB.init({
        xfbml            : true,
        version          : 'v10.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'));
  </script>

  <!-- Your Chat Plugin code -->
  <div class="fb-customerchat"
    attribution="page_inbox"
    page_id="PAGE ID">
  </div>

When I remove that, the CORS errors disappear, and Facebook Login works correctly. Any ideas? Thanks