Netlify部署Gatsby+Partytown时配置代理解决GTM的CORS错误

先梳理你现有配置里的核心问题，再给出针对性修复方案：

1. 重复加载GTM脚本引发冲突 #

你的gatsby-ssr.js里同时做了两次GTM脚本加载操作：

• 单独用<script type="text/partytown">加载gtm.js
• 内联的GTM初始化代码里，又动态创建了一个script标签去加载同一份gtm.js

这会导致重复请求，且Partytown处理内联脚本时，动态生成的请求如果没走代理（或代理配置有误），就会触发CORS错误。

先简化gatsby-ssr.js配置，去掉重复的script标签，同时确保所有GTM请求都指向Netlify代理地址：

import React from "react";
import { Partytown } from "@builder.io/partytown/react";

// 替换为Netlify代理的路径
const ORIGIN = "/local-gtm";
const GTM_ID = "XXXXXX";

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    // 补充forward dataLayer.push，确保GTM的数据层能正常工作
    <Partytown key="partytown" forward={["gtm", "dataLayer.push"]} />,
    <script
      key="google-tag-manager-config"
      type="text/partytown"
      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=
        '${ORIGIN}/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${GTM_ID}');`,
      }}
    />,
  ]);
};

2. 修正Netlify代理配置 #

你的redirect配置缺少强制跳转和CORS头设置，修改netlify.toml：

[[redirects]]
  from = "/local-gtm/*"
  to = "https://www.googletagmanager.com/:splat"
  status = 200
  force = true
  headers = { Access-Control-Allow-Origin = "*" }

3. 额外必做检查 #

• 确保Partytown静态资源部署正确：Gatsby集成Partytown时，需要把node_modules/@builder.io/partytown/lib下的文件复制到静态资源目录，可在gatsby-node.js中添加自动复制逻辑：

const fs = require("fs");
const path = require("path");

exports.onPostBuild = () => {
  const src = path.join(__dirname, "node_modules", "@builder.io", "partytown", "lib");
  const dest = path.join(__dirname, "public", "~partytown");
  fs.cpSync(src, dest, { recursive: true });
};

• 清除Netlify缓存重新部署：旧缓存可能导致配置不生效，部署时勾选「Clear cache and deploy site」选项

内容的提问来源于stack exchange，提问作者Marko