部署在Cloud Run的GTM服务器端容器CORS问题求助

错误信息 #

"Access to fetch at 'https://server-side-tagging-435g2dg4kq-uc.a.run.app/' from origin 'https://mydom.it' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

已尝试的操作 #

• 服务器端客户端配置：在GTM服务器端容器的onClientRequest函数中设置CORS头部，代码如下：

function onClientRequest(event) {
  event.logInfo("Support Container: Inizio elaborazione richiesta.");

  event.setResponseHeader("Access-Control-Allow-Origin", "https://frattinauto.it");
  event.setResponseHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
  event.setResponseHeader("Access-Control-Allow-Headers", "Content-Type");

  if (event.getRequestMethod && event.getRequestMethod() === 'OPTIONS') {
    return {
      continue: false,
      response: {
        status: 200,
        headers: {
          "Access-Control-Allow-Origin": "https://frattinauto.it",
          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type"
        },
        body: ""
      }
    };
  }

  // 处理POST请求的JSON解析
  var parsedBody = event.getJson();
  if (parsedBody) {
    event.logInfo("Support Container: Body interpretato come JSON:", parsedBody);
  } else {
    event.logInfo("Support Container: Body non è JSON o è vuoto.");
  }

  event.setData('payload_support', parsedBody);

  return { continue: true };
}

function onTags(event) {
  var payloadSupport = event.getData('payload_support') || null;
  event.logInfo("Support Container onTags: payload_support =", payloadSupport);
  return {
    payloadSupport: payloadSupport
  };
}

已确认头部和网页源站域名均设置为https://mydom.it（无末尾斜杠）。

• Web容器的Fetch请求：通过以下代码发送负载：

fetch('https://server-side-tagging-435g2dg4kq-uc.a.run.app/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
})
.then(response => response.text())
.then(data => {
  console.log("Response from server-side:", data);
})
.catch(err => {
  console.error("Fetch error:", err);
});

• 通配符测试：尝试将Access-Control-Allow-Origin设置为"*"，错误仍存在。

• GTM服务器端预览结果：发送请求时服务器端容器无日志记录，推测请求在浏览器OPTIONS预检阶段被拦截，预检请求未返回正确CORS头部，导致实际POST请求被阻止。

当前情况 #

浏览器发起OPTIONS预检请求，期望返回状态码200及以下头部：

Access-Control-Allow-Origin: https://frattinauto.it

Access-Control-Allow-Methods: GET, POST, OPTIONS

Access-Control-Allow-Headers: Content-Type

但实际返回400（Bad Request）且无CORS头部，浏览器因此阻止POST请求。

问题 #

• 为何GTM服务器端容器未为OPTIONS请求返回正确的CORS头部？
• 是否存在末尾斜杠或域名不匹配导致预检失败的已知问题？
• Cloud Run或GTM是否需要额外配置以确保预检请求被正确处理？

解决指导 #

1. 调整自定义客户端优先级：确保包含CORS处理逻辑的自定义客户端优先级高于默认客户端（如Google Analytics客户端）。在GTM服务器端容器的「客户端」页面，将自定义客户端优先级设为最高，避免默认客户端先匹配并拦截OPTIONS请求。

2. 修正OPTIONS请求处理逻辑：确认event.getRequestMethod的调用逻辑，可补充Access-Control-Max-Age头部缓存预检结果，修改后的判断逻辑如下：

if (typeof event.getRequestMethod === 'function' && event.getRequestMethod() === 'OPTIONS') {
  return {
    continue: false,
    response: {
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "https://frattinauto.it",
        "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Max-Age": "86400" // 缓存预检结果24小时
      },
      body: ""
    }
  };
}

3. 检查Cloud Run的Ingress设置：进入Cloud Run控制台，将服务的Ingress设置为「允许所有流量」，避免内部/限制模式拦截外部浏览器的预检请求。

4. 验证客户端触发路径匹配：确认自定义客户端的触发条件包含请求的目标路径（如根路径/）。如果客户端仅匹配特定路径（如/collect），而请求发送到根路径，会导致CORS逻辑无法执行。可设置触发条件为匹配所有路径，或指定请求的具体路径。

5. 统一路径格式：确保请求URL和客户端触发规则的路径格式一致，避免末尾斜杠差异导致匹配失败。例如，请求URL去掉末尾斜杠，或客户端触发规则同时覆盖带斜杠和不带斜杠的路径。

6. 排查Cloud Run前端的负载均衡/CDN配置：如果Cloud Run服务前配置了Cloud CDN或其他负载均衡器，需确保这些服务允许OPTIONS请求传递到后端GTM容器，或在负载均衡层补充CORS规则配置。

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