结论先行：Cookie 是网站保存在本地浏览器的小型数据，获取 Cookie 主要分两种方式，第一种是浏览器开发者工具直接查看，第二种是前端 JavaScript 代码读取 document.cookie，后端也可以在 HTTP 响应里通过 Set-Cookie 下发 Cookie，需要注意同源限制，跨域 Cookie 默认无法读取，同时 Cookie 有 HttpOnly 属性，一旦设置 HttpOnly，前端 JS 就读取不到，这个是开发最容易踩坑的点。

基础原理

Cookie 由服务器通过响应头 Set-Cookie 创建，存储在浏览器，后续每次请求该域名，浏览器会自动把 Cookie 携带到请求头 Cookie 字段，只有同域名同源页面才有权限读取对应 Cookie，HttpOnly 标记的 Cookie 专门用于服务端会话，禁止 JS 访问，提升安全。

方法一 Chrome Edge 开发者工具查看（最常用）

1 打开目标网页，登录网站

2 按 F12 打开开发者工具

3 切换到 Application（应用）面板

4 左侧存储栏找到 Cookies，展开选择当前域名

5 表格里面可以看到每一条 cookie 的名称、值、过期时间、域、路径、HttpOnly 标记

方法二 前端 JS 获取 cookie

核心代码：

const cookieStr = document.cookie

console.log(cookieStr)

说明：document.cookie 返回的是字符串，格式是 name1=value1; name2=value2，需要自己写代码拆分解析成键值对

解析示例代码

function getCookie(name){

const arr = document.cookie.split('; ')

for(let item of arr){

const [k,v] = item.split('=')

if(k === name) return decodeURIComponent(v)

}

return null

}

方法三 抓包工具获取（请求头里的 cookie）

使用 Fiddler Charles 浏览器网络面板

1 打开开发者工具 Network 网络面板

2 刷新页面，选中任意请求

3 在请求标头 Request Headers，找到 Cookie 字段，这里就是本次请求浏览器自动携带的 cookie

重要限制要点

限制项说明
HttpOnly设置 HttpOnly 的 cookie，document.cookie 读取不到，只能服务端读取
同源策略只能读取当前域名 cookie，不能读取其他网站 cookie
Secure标记 Secure 的 cookie，只在 https 协议下传输
过期时间过期 cookie 会自动清除，无法获取

学习操作步骤

第一步 打开目标网站，登录账号

第二步 F12 打开 Application 面板，查看 cookie 列表

第三步 控制台输入 document.cookie，查看 JS 读取结果

第四步 如果读不到，检查这条 cookie 是否开启 HttpOnly

第五步 写拆分函数，单独提取指定名称 cookie 的值

综合来看，日常调试优先用开发者工具 Application 面板，前端开发用 document.cookie 读取，HttpOnly 的 cookie 前端拿不到，只能后端服务端读取，跨域场景还要额外配置 SameSite 属性。

【相关 FAQ】

问题 1 为什么 document.cookie 是空的

回答 1 大概率这条 cookie 设置了 HttpOnly 属性，HttpOnly 的 cookie 前端 JS 无法读取，或者当前页面还没有写入 cookie，也可能域名路径不匹配。

问题 2 可以获取别的网站的 cookie 吗

回答 1 不可以，浏览器同源安全策略限制，cookie 只能当前同源域名页面读取，不能跨站获取其他网站 cookie。

问题 3 后端是怎么拿到 cookie 的

回答 1 浏览器请求的时候自动把 cookie 放到请求头 Cookie，后端服务端直接读取请求头里面的 Cookie 内容，不需要前端传递。

问题 4 document.cookie 可以获取全部 cookie 吗

回答 1 不能，带 HttpOnly 标记的 cookie 会被排除，document.cookie 只能获取非 HttpOnly 的同源 cookie。

【免责声明】

本内容仅用于合法的前端开发、自身网站调试学习，禁止未经授权抓取他人网站 Cookie、窃取用户会话凭证，相关行为可能违反法律法规与网站用户协议。