如何在 Next.JS 站点中启用 CORS 以访问 Facebook 聊天插件？

Question

• 此处的 vercel 文档 https://vercel.com/guides/how-to-enable-cors#enabling-cors-in-a-next.js-app 解释了在多个路由上允许 CORS 的方法。但我似乎找不到一种方法来为通过 Next.JS 脚本组件注入的 3party 脚本启用 CORS，例如用于聊天信使的 facebook SDK。

• 这是在 _app.tsx 中定义的脚本。

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

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

• 这是来自 facebook 聊天插件的第三方脚本

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

当此第 3 方脚本向 facebook.com 域发出请求时，会出现此问题，它被 CORS 策略阻止。

实现 facebook sdk 聊天信使脚本后，聊天信使弹出窗口应该出现在 Next.JS 站点中，相反，请求会被 CORS 策略阻止。

Answer 1

尝试将您的域名添加到 Facebook 页面设置中的白名单中