直接点右侧默认展开的headers标签页即可查看完整请求头和响应头；它分general（只读元信息）、request headers（浏览器发出的头）和response headers（服务器返回的头）三栏。
直接用浏览器 DevTools 的 Network 面板就能看全请求头和响应头，不需要写代码、装插件或改配置——但很多人点错了标签页，或者没刷新就点请求，导致看到的 headers 是空的或过期的。
Network 面板里该点哪个标签看 headers
打开 DevTools（F12 或 Ctrl+Shift+I），切到 Network 标签页，然后：
- 必须先刷新页面（或触发目标请求），否则列表为空
- 在请求列表中点击任意一项（比如
index.html或某个api/user） - 右侧默认展开的是
Headers标签页——这才是请求/响应头的完整视图 - 别误点
Payload（那是请求体）、Response（那是响应体）或Preview（那是渲染预览）
Headers 里三块内容分别对应什么
Headers 标签页纵向分三栏，每栏作用明确：
-
General：只读信息，含
Request URL、Request Method（如GET）、Status Code（如200 OK）、Remote Address等，不参与调试逻辑 -
Request Headers：浏览器实际发出去的头，比如
Accept、Authorization、Content-Type（POST 时才有）、Cookie。注意：若值显示[Provisional headers are shown]，说明请求被拦截（常见于 CORS 预检失败或 Service Worker 拦截） -
Response Headers：服务器返回的头，比如
Content-Type、Cache-Control、Set-Cookie、Access-Control-Allow-Origin。CORS 报错时，第一眼就该查这里有没有对应头
为什么有时候 Request Headers 里看不到 Authorization 或自定义头
不是 DevTools 没抓到，而是这些头根本没发出去。常见原因：
- JS 代码里没正确设置：
fetch(url, { headers: { 'Authorization': 'Bearer xxx' } })写成了headers: { authorization: '...' }（HTTP 头名大小写不敏感，但某些环境会因拼写不规范被忽略） - 跨域请求且没加
credentials: 'include'，导致 Cookie 和部分认证头被自动剥离 - 请求是
GET或HEAD，但代码里错误地传了body，浏览器静默丢弃 body 及关联的Content-Type头 - 前端框架（如 Axios）做了默认拦截，需检查
interceptors.request.use是否误删了头
想快速导出或比对 headers 怎么办
DevTools 不支持一键复制全部 headers，但有轻量替代方案：
- 右键某条请求 →
Copy→Copy as cURL：粘贴到终端可复现请求，也隐含了所有 headers - 在
Console面板运行这段脚本（仅限同源请求）：(function() { fetch(window.location).then(r => r.headers.forEach((v, k) => console.log(k + ': ' + v))) })(); - 需要长期比对？用
curl -I https://example.com直接看响应头，绕过浏览器层干扰
真正容易被忽略的点是：Headers 内容依赖请求是否真实发出。如果页面用了 React/Vue 的懒加载、IntersectionObserver 触发请求，或者后端重定向了三次，你得确保点中的那条请求确实是你要分析的那个——而不是它的重定向来源或预加载占位符。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
