Angular如何通过JS删除document.cookie无法访问的站点Cookie

你无法通过JS访问到的这类Cookie是带有HttpOnly属性的Cookie，这是浏览器的标准安全防护机制：只要Cookie被标记为HttpOnly，任何前端JavaScript代码（包括原生JS、jQuery、各类npm依赖包）都无权读取、修改、删除它，设计这个规则的目的是避免XSS攻击窃取用户敏感登录凭证。
这类Cookie的控制权完全在服务端，只有下发该Cookie的服务端可以通过HTTP响应头操作它。

方案1：通过服务端响应删除（唯一能删除HttpOnly Cookie的方式） #

对接后端提供的清除凭证接口，要求后端在接口响应头中添加Set-Cookie字段来标记对应Cookie过期，格式参考：

Set-Cookie: 你要删除的Cookie名称=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=Cookie原本的path值; domain=Cookie原本的domain值; HttpOnly; Secure; SameSite=Cookie原本的SameSite值

注意删除时path、domain、Secure、SameSite属性必须和Cookie原本的属性完全一致，否则浏览器不会识别为同一个Cookie，删除操作会失效。浏览器收到这个响应头后会自动清除对应HttpOnly Cookie，不需要前端额外操作。

方案2：前端删除非HttpOnly但路径/域名不匹配的Cookie #

如果确认Cookie没有HttpOnly标记，只是因为设置的path或domain和当前页面不匹配导致document.cookie读不到，可以在Angular中用以下工具方法删除，不需要引入额外依赖：

// cookie.utils.ts
export function clearCookie(cookieName: string, targetDomain: string, basePath: string = '/') {
  // 生成过期Cookie规则
  const buildExpireCookie = (path: string) => {
    document.cookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}; domain=${targetDomain}`;
  }
  // 遍历所有路径层级兜底清除
  buildExpireCookie(basePath);
  const pathSegments = basePath.split('/').filter(seg => seg.trim());
  for (let i = 1; i <= pathSegments.length; i++) {
    const currentPath = '/' + pathSegments.slice(0, i).join('/');
    buildExpireCookie(currentPath);
  }
  buildExpireCookie('/');
}

调用时传入要删除的Cookie名、对应域名、Cookie原本的path即可，这个方法对带HttpOnly标记的Cookie完全无效。

• 不存在任何纯前端JS方式可以删除HttpOnly Cookie，所有声称支持该能力的库都是虚假宣传，不要浪费时间尝试。
• 本地调试阶段如果要快速清除HttpOnly Cookie，只能手动在浏览器站点信息面板点击删除，或者清除对应站点的全部缓存数据，无法通过代码自动化完成。

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