带有Nextjs的第三方脚本-由Cors策略阻止错误

Question

我在从nextjs实现脚本处理工具时遇到了问题。我遵循nextjs ( https://nextjs.org/docs/basic-features/script)文档，并使用worker (试验性)参数来提高页面性能。但是，它给了我一个被Cors策略错误阻塞的信息。

代码：

​

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        strategy="worker"
        id="google-tag-manager"
        dangerouslySetInnerHTML={{
          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var
              f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
              'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
              })(window,document,'script','dataLayer','GTM-NGZ3B84');`,
        }}
      />
....
....
....

​

错误：在这里输入图像描述

Answer 1

这样的CORS策略意味着您的域正在阻止来自外部域的引用。在这种情况下，GTM容器。

若要允许来自外部站点的引用，可以为域设置HTML响应头。允许所有标头或特定域标头都可以工作。

Access-Control-Allow-Origin: *

Access-Control-Allow-Origin: http://example.com:3000