浏览器手动与服务器设置的Cookie有差异吗？React本地Cookie移除问题排查

一、浏览器手动设置Cookie与服务器设置Cookie的差异 #

• 创建方式不同：服务器通过HTTP响应头Set-Cookie字段向浏览器下发Cookie；手动设置则是在浏览器DevTools的Application面板直接添加，或者通过前端JS调用document.cookie写入。
• 可配置属性有区别：服务器设置的Cookie可以配置HttpOnly（禁止前端JS读取/修改）、Secure（仅在HTTPS请求中传输）、SameSite（控制跨站请求时是否携带）、Domain（指定生效域名）、Path（指定生效路径）等高级属性；手动设置时，DevTools无法直接添加HttpOnly属性，JS代码也不能设置该属性。
• 修改权限不同：带有HttpOnly属性的服务器Cookie，前端无论是手动还是通过JS都无法修改或删除；而手动设置的Cookie（无HttpOnly），服务器可以通过新的Set-Cookie头覆盖。
• 生命周期控制不同：服务器可以通过Max-Age（存活秒数）或Expires（过期时间点）明确指定Cookie的有效期；手动设置如果不指定过期时间，默认是会话Cookie，关闭浏览器就会失效。

二、本地环境手动Cookie被react-gtm-module移除的原因及实现逻辑 #

你遇到的本地开发时手动添加的Cookie被移除、部署后正常的情况，核心原因是react-gtm-module加载的Google Tag Manager（GTM）脚本，在本地环境配置了Cookie清理逻辑，而生产环境的GTM容器没有这个配置。

这类Cookie清理操作的常见实现方式 #

• 批量删除所有可访问Cookie：通过JS读取当前域名下所有非HttpOnly的Cookie，逐个设置过期时间为过去的时间，让浏览器自动清除。示例代码如下：

// 遍历并删除当前域名下所有可访问的Cookie
document.cookie.split(';').forEach(cookie => {
  const cookieName = cookie.trim().split('=')[0];
  document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; domain=${window.location.hostname}`;
});

这段代码会处理所有前端可操作的Cookie，设置过期时间为Unix纪元时间，强制浏览器删除它们。

• 定向覆盖/删除特定Cookie：GTM通常需要设置自己的追踪Cookie（比如_ga、_gid），部分场景下会先删除同名的旧Cookie，再写入新的追踪值。这种操作只会针对特定Cookie，而非全部。

本地与生产环境差异的诱因 #

• GTM容器环境隔离：多数团队会为本地开发、测试、生产配置独立的GTM容器。本地容器可能包含调试用的脚本，清理Cookie是为了避免本地测试时旧的测试Cookie干扰追踪数据准确性；生产容器则专注于正常的统计逻辑，不会执行清理操作。
• 环境协议/域名判断：本地开发一般用http://localhost这类非HTTPS域名，而生产是HTTPS环境。GTM脚本可能会根据协议或域名判断环境，仅在非HTTPS的本地环境触发Cookie清理逻辑。

内容的提问来源于stack exchange，提问作者Bojana Šekeljić