Next.js 13中如何修复Google Analytics引发的CORS错误？

我之前在Next.js项目里集成Google Analytics的时候也碰到过一模一样的CORS错误，当时也很困惑——明明是GET请求怎么还会触发这个问题？后来查了不少资料才搞清楚原因，给你分享几个可行的解决办法：

问题根源 #

虽然你的请求是GET类型，但Google Analytics的gtag脚本默认会在请求中携带凭证信息（比如Cookie），而Google Analytics的collect端点返回的Access-Control-Allow-Origin头是通配符*。根据CORS规则，当请求的凭证模式为include时，响应头里不能用*，必须指定具体的源域名，这就导致了冲突报错。

解决方法 #

1. 移除first_party_collection配置

你代码里设置了first_party_collection: true，这个配置是让GA使用第一方域名发送数据，但在本地开发环境（localhost:3000）下，第一方域名的配置往往不生效，反而会触发凭证相关的CORS问题。先试试把这个配置项删掉：

gtag('config', '${gaMeasurementId}', {
  page_path: window.location.pathname,
  transport_url: '${reportDomain}'
  // 移除 first_party_collection: true
});

2. 改用Beacon传输方式

Beacon API是浏览器提供的异步数据上报接口，它不会携带凭证信息，能绕过CORS的凭证检查限制。你可以关闭GA的自动页面视图发送，手动用Beacon方式上报：

gtag('js', new Date());
gtag('config', '${gaMeasurementId}', {
  page_path: window.location.pathname,
  transport_url: '${reportDomain}',
  send_page_view: false // 关闭自动页面视图上报
});

// 手动用Beacon发送页面视图
gtag('event', 'page_view', {
  page_path: window.location.pathname,
  transport_type: 'beacon'
});

3. 本地开发环境临时禁用GA

如果这个错误只在本地开发时出现，生产环境正常，你可以通过环境变量判断，在开发环境不加载GA脚本，避免不必要的报错：

const isProduction = process.env.NODE_ENV === 'production';

return (
  <>
    {children}
    {isProduction && (
      <>
        <Script
          id="google-analytics-js-cdn"
          src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
          strategy="afterInteractive"
        />
        <Script
          id="google-analytics"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${gaMeasurementId}', {
                page_path: window.location.pathname,
                transport_url: '${reportDomain}'
              });
            `,
          }}
        />
      </>
    )}
  </>
);

额外提示 #

你代码里的transport_url设置的是GA的默认域名，其实可以不用手动指定，直接删掉这个参数也不会影响功能，还能减少配置复杂度。

备注：内容来源于stack exchange，提问作者Chanan Braunstein