How to enable CORS in a Next.JS site for accessing Facebook Chat Plugin?

Question

• The vercel documentation here https://vercel.com/guides/how-to-enable-cors#enabling-cors-in-a-next.js-app, explains the method to allow CORS on multiple routes. But I can't seem to find a way to enable CORS for 3party scripts injected throught Next.JS Script Component, for instance the facebook SDK for chat messenger.

• Here is the script defined in _app.tsx.

const MyApp = ({ Component, pageProps }: AppProps) => (
  <>
    <Component {...pageProps} />

    <Script strategy="beforeInteractive" src="/scripts/fb-chat.js" />
  </>
); 

• and here is the third party script from facebook chat plugin

const chatbox = document.getElementById('fb-customer-chat');
chatbox.setAttribute('page_id', '107898014052880');
chatbox.setAttribute('attribution', 'biz_inbox');

window.fbAsyncInit = function () {
  FB.init({
    xfbml: true,
    version: 'v15.0',
  });
};

(function (d, s, id) {
  let js;
  const 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');

The issue appears when this 3rd party script, makes requests to facebook.com domain, it is blocked by CORS policy. enter image description here

After implementing the facebook sdk chat messenger script, the messenger chat popup, should appear in the Next.JS site, In contrary, the requests are blocked by the CORS policy.

Answer 1

Try to add you domain to the whitelist in your Facebook page settings