Angular应用经http-server部署时ngx-cookie在路由跳转/新标签打开时异常被删的原因

一、Cookie 写入参数与浏览器兼容的匹配问题 #

• 先核对版本适配性：ngx-cookie-service 11.0.2 原生适配Angular 11.x 版本，如果你当前使用的是Angular 10，版本不兼容会导致库的Cookie域解析逻辑出现偏差——在非localhost的IP访问场景下，库可能错误将Cookie的domain参数解析为局域网网段根域而非当前实际访问的IPv4地址，当路由跳转前后的路径层级变化时，浏览器会判定Cookie作用域不匹配，自动删除对应Cookie。
• 适配Chrome 86的兼容要求：这个版本的Chrome已经开始强制校验Cookie的SameSite属性，ngx-cookie-service 11.0.2 版本默认写入Cookie时没有显式指定SameSite值，部分场景下会被浏览器判定为SameSite=None但未携带安全属性，触发临时拦截；同时因为是偶发复现，拦截结果会受当前站点的其他资源加载状态影响，没有固定触发规律。
• 修复参考：所有Cookie写入操作不要依赖库的默认参数，显式配置作用域：

this.cookieService.set(
  'cookieKey',
  'cookieValue',
  1, // 过期时间（天）
  '/', // 路径，显式指定为站点根路径
  window.location.hostname, // 显式绑定当前访问的IPv4地址为Cookie域，不要依赖自动解析
  false, // 局域网HTTP访问不需要安全属性
  'Lax' // 显式指定SameSite值，匹配Chrome 86的校验规则
)

二、路由跳转链路的误删逻辑排查 #

• 定位所有主动删除Cookie的代码：全局搜索项目内所有调用cookieService.delete()、cookieService.deleteAll()的代码位置，重点检查路由守卫（AuthGuard）、路由订阅钩子的逻辑——很多场景下守卫会在路由跳转时校验Cookie是否存在，由于Chrome 86下的前端Cookie读写并非完全同步，当路由切换速度快于Cookie持久化IO时，守卫会短暂读到空Cookie值，触发误删逻辑，这也是异常无固定触发规律的核心诱因。
• 验证方式：在每一处Cookie删除逻辑中添加日志，输出删除操作触发时的当前URL、全量Cookie列表、触发来源，复现异常时可以直接定位是否为业务代码的误删。

三、http-server托管场景的环境干扰排查 #

• 排除静态托管的资源加载异常：http-server本身不会主动通过响应头清理Cookie，但如果启动服务时未配置正确的静态资源映射，Angular路由跳转时加载的JS、CSS资源出现404，会触发Chrome 86对非HTTPS局域网IP站点的Cookie临时隔离机制，批量清除当前站点的Cookie。
• 验证方式：启动http-server时显式指定关闭缓存参数，排除静态资源加载失败的干扰：

http-server ./dist -c-1 -p 8080

逐次执行路由跳转，打开DevTools的Application面板观察Cookie留存状态，确认异常发生前是否存在连续的静态资源加载失败。

注意：由于当前没有实现任何后端会话逻辑，无需考虑跨域、后端响应头携带Clear-Site-Data指令、会话超时等后端侧干扰因素，所有排查优先级聚焦在前端配置、代码逻辑、浏览器兼容三个层面即可。

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