作为前端开发者，浏览器 DevTools → Network 是我们排查接口、定位问题、优化性能的核心阵地。很多同学只关注 Status Code，却忽略了Headers（请求头/响应头） 里藏着的关键信息——跨域、缓存、鉴权、数据格式、压缩优化，几乎所有接口相关问题，都能在 Headers 里找到答案。
本文以实战常用为核心，深入讲解 Network 中高频 HTTP Headers，帮你彻底吃透这部分调试知识。
一、先搞懂：Headers 是什么？
HTTP Headers 是客户端（浏览器）和服务器之间传递的「元信息」，不包含请求/响应的实际数据，却负责控制通信规则：
– 放在请求里 → Request Headers（浏览器告诉服务器：我是谁、要什么、怎么传）
– 放在响应里 → Response Headers（服务器告诉浏览器：我是谁、给你什么、怎么存）
在 Network 面板中，点击任意接口，右侧 Headers tab 即可查看完整头信息。
二、高频 Request Headers（请求头）详解
请求头是浏览器主动发给服务器的信息，前端调试、接口封装、跨域排查中使用率极高。
1. Accept
作用：告诉服务器，客户端能接收的响应数据格式。
前端场景：服务器据此返回对应格式（JSON/HTML/图片等）。
常用值：
Accept: application/json, text/plain, */*
application/json：优先接收 JSON*/*：接收任意格式
2. Accept-Encoding
作用：告诉服务器，客户端支持的压缩算法。
前端价值：开启压缩能大幅减少接口体积，提升加载速度。
常用值：
Accept-Encoding: gzip, deflate, br
gzip：最通用压缩br：Brotli，比 gzip 压缩率更高（现代浏览器支持）
3. Host
作用：指定请求的目标域名 + 端口。
核心意义：一台服务器对应多个域名时，靠 Host 区分请求目标。
示例：
Host: api.xxx.com
4. User-Agent（UA）
作用：客户端身份标识，包含浏览器、操作系统、设备信息。
前端场景：
– 区分 PC/移动端、iOS/Android
– 兼容不同浏览器（如 IE、Chrome）
– 埋点统计用户设备
示例：
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 Chrome/120.0.0.0 Safari/537.36
5. Origin
作用：跨域核心请求头，标识请求来源的「协议+域名+端口」。
关键：
– 仅跨域请求会携带
– 服务器靠 Origin 判断是否允许跨域
示例：
Origin: https://www.xxx.com
6. Referer
作用：告诉服务器，当前请求是从哪个页面跳转/发起的。
前端场景：
– 防盗链（服务器校验 Referer 拒绝非法请求）
– 页面统计、流量来源分析
注意：隐私模式/HTTPS→HTTP 可能不携带。
7. Content-Type
⭐ 前端最常用、最容易踩坑的请求头
作用：声明请求体（Request Body）的数据格式。
三大常用值：
1. application/json
前后端分离主流格式，传递 JSON 对象：
“`
Content-Type: application/json; charset=UTF-8
“`
2. `application/x-www-form-urlencoded`
表单默认格式，参数以 `key=val&key2=val2` 拼接。
3. `multipart/form-data`
上传文件专用，不设置 `Content-Type`，浏览器自动生成。
踩坑点：请求体格式和 Content-Type 不匹配，会导致后端接收参数失败。
8. Authorization
作用：身份鉴权，携带用户令牌（Token）。
前端场景：登录后接口鉴权，几乎所有业务接口必带。
常用格式：
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
9. 缓存相关请求头
Cache-Control
作用：控制请求的缓存策略。
常用值：
– no-cache：强制向服务器验证缓存（不直接用本地缓存）
– no-store：完全不缓存
If-Modified-Since / If-None-Match
作用：协商缓存核心，浏览器带上服务器上次返回的标识，询问资源是否更新。
– 资源未修改 → 服务器返回 304 Not Modified，直接用缓存
– 资源已修改 → 服务器返回新资源
三、高频 Response Headers（响应头）详解
响应头是服务器返回给浏览器的规则，决定缓存、跨域、数据解析、重定向等行为。
1. Content-Type
作用：声明响应体的数据格式，浏览器据此解析数据。
常用值：
Content-Type: application/json; charset=utf-8
Content-Type: text/html; charset=utf-8
Content-Type: image/png
2. Content-Encoding
作用：服务器告知浏览器：响应体用了什么压缩算法。
示例：
Content-Encoding: gzip
浏览器收到后会自动解压，前端无需手动处理。
3. 缓存控制响应头（⭐ 性能优化核心）
Cache-Control
作用：服务器定义强缓存规则，优先级最高。
常用值：
– max-age=3600：缓存 3600 秒（1小时）内，直接用本地缓存
– public：所有节点（浏览器、CDN）都可缓存
– private：仅浏览器可缓存
– no-cache：需协商缓存，不直接用强缓存
– no-store：不缓存任何内容
Expires
HTTP/1.0 缓存头，指定缓存过期时间，已被 Cache-Control 替代。
Last-Modified / ETag
协商缓存标识：
– Last-Modified：资源最后修改时间
– ETag：资源唯一哈希值
浏览器下次请求会带上 If-Modified-Since/If-None-Match 校验。
4. 跨域相关响应头（CORS 必看）
Access-Control-Allow-Origin
跨域核心：服务器允许的请求源。
示例：
Access-Control-Allow-Origin: https://www.xxx.com
Access-Control-Allow-Origin: * （允许所有源，生产不推荐）
Access-Control-Allow-Headers
允许前端自定义的请求头（如 token、Content-Type）。
Access-Control-Allow-Methods
允许的请求方法（GET/POST/PUT/DELETE）。
5. Set-Cookie
作用：服务器通过响应头，向浏览器写入 Cookie。
示例：
Set-Cookie: sid=abc123; Path=/; HttpOnly; Secure; SameSite=Lax
关键属性：
– HttpOnly：禁止 JS 读取，防 XSS
– Secure：仅 HTTPS 传输
– SameSite：防 CSRF 攻击
6. Location
作用：重定向地址，配合 3xx 状态码使用。
场景：登录后跳转、接口重定向。
示例：
Location: https://www.xxx.com/home
7. Server
服务器软件标识（如 Nginx、Apache、Node.js）。
四、前端实战：靠 Headers 排查 3 类高频问题
- 跨域报错
看Response Headers有无Access-Control-Allow-Origin，无则后端未配置跨域。 -
接口参数接收失败
核对Request Headers→Content-Type与请求体格式是否一致。 -
接口不更新/缓存异常
看Cache-Control是否强制缓存，或304状态码触发协商缓存。
五、总结
HTTP Headers 是前端与服务器通信的「隐形协议」：
– 调试接口：先看 Status Code，再查 Headers
– 封装请求：重点控制 Content-Type、Authorization
– 性能优化：靠 Cache-Control、Content-Encoding 做缓存+压缩
– 跨域解决：围绕 Origin + 跨域响应头排查
吃透这些常用 Headers，你在 Network 面板里就能快速定位 90% 的接口问题。
需要我把这篇文章整理成可直接复制到技术博客的 Markdown 源码吗？
