一、什么是响应头？
响应头是 HTTP 响应中，服务器向浏览器传递的附加信息，用于描述响应数据类型、缓存策略、跨域权限、Cookie 设置等，不包含实际业务数据。
HTTP 响应结构：
┌─────────────────────────────────────────┐
│ 状态行：HTTP/1.1 200 OK │
├─────────────────────────────────────────┤
│ 响应头： │
│ Content-Type: application/json │
│ Cache-Control: max-age=3600 │
│ Access-Control-Allow-Origin: * │
├─────────────────────────────────────────┤
│ 空行 │
├─────────────────────────────────────────┤
│ 响应体：{"code":200,"data":{...}} │
└─────────────────────────────────────────┘二、核心响应头详解
1. Content-Type（内容类型）
作用：告诉浏览器当前返回的数据是什么格式，浏览器根据它决定如何解析内容。
| Content-Type | 说明 | 使用场景 |
|---|---|---|
application/json |
JSON 数据 | 前后端分离接口（最常用） |
application/x-www-form-urlencoded |
表单格式 | 普通表单提交 |
multipart/form-data |
混合格式 | 文件上传 |
text/html |
HTML 页面 | 网页返回 |
text/plain |
纯文本 | 普通文本 |
image/png、image/jpeg |
图片 | 图片资源 |
application/octet-stream |
二进制流 | 文件下载 |
# 示例
Content-Type: application/json; charset=utf-8
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary2. Cache-Control（缓存控制）
作用：控制浏览器如何缓存响应。
| 值 | 说明 |
|---|---|
no-cache |
每次都要去服务器协商缓存，能用缓存才用 |
no-store |
真正不缓存，每次都全新请求 |
max-age=3600 |
缓存 3600 秒 |
public |
允许任何中间节点缓存（CDN、代理） |
private |
只允许浏览器缓存 |
must-revalidate |
缓存过期后必须重新验证 |
html
# 示例
Cache-Control: no-cache
Cache-Control: max-age=3600, public
Cache-Control: private, max-age=864003. Access-Control-Allow-Origin（跨域核心）
作用：告诉浏览器允许哪些域名访问资源，解决跨域问题。
html
# 允许所有域名（不推荐，不安全）
Access-Control-Allow-Origin: *
# 允许指定域名
Access-Control-Allow-Origin: https://example.com
# 允许携带 Cookie 时必须具体域名
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true4. Set-Cookie（设置 Cookie）
作用：服务器告诉浏览器设置 Cookie。
html
Set-Cookie: name=value; Path=/; Expires=Wed, 21 Oct 2025 07:28:00 GMT; HttpOnly; Secure; SameSite=Lax属性说明：
| 属性 | 说明 |
|---|---|
HttpOnly |
JS 无法读取，防 XSS 攻击 |
Secure |
只在 HTTPS 下传输 |
SameSite |
防 CSRF 攻击（Strict/Lax/None） |
Expires / Max-Age |
过期时间 |
Path |
Cookie 生效路径 |
Domain |
Cookie 生效域名 |
5. Content-Length（内容长度）
作用：告诉浏览器响应体的字节长度。
Content-Length: 3486. Location（重定向地址）
作用：配合 301/302 状态码，告诉浏览器跳转到哪个地址。
HTTP/1.1 302 Found
Location: https://www.example.com/new-page7. Content-Disposition（文件下载）
作用：告诉浏览器这是下载文件，不是直接打开。
# 内联显示（默认）
Content-Disposition: inline
# 附件下载
Content-Disposition: attachment; filename="report.pdf"
# 中文文件名需要编码
Content-Disposition: attachment; filename*=UTF-8''%E6%8A%A5%E5%91%8A.pdf8. ETag / Last-Modified（协商缓存）
作用：配合 If-None-Match / If-Modified-Since 实现协商缓存。
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2025 07:28:00 GMT三、面试高频问题
1. 跨域相关（必考）
Q：前端跨域报错，一般是哪个响应头没配？
A：
Access-Control-Allow-Origin。没有这个头，浏览器会拦截响应，报 CORS 错误。
Q：带 Cookie 跨域要哪些响应头？
A：
Access-Control-Allow-Origin不能为*，必须具体域名
Access-Control-Allow-Credentials: true
2. 缓存相关（高频）
Q：Cache-Control: no-cache 和 no-store 区别？
A：
no-cache：不是不缓存，是每次都要去服务器协商缓存，能用缓存才用
no-store：真正不缓存，每次都全新请求
Q：协商缓存靠哪两个响应头？
A：
ETag和Last-Modified，配合请求头的If-None-Match和If-Modified-Since。
3. Cookie 相关
Q：服务器怎么种 Cookie？
A： 通过响应头
Set-Cookie。
Q：Set-Cookie 里 HttpOnly 是什么意思？
A： JS 无法读取该 Cookie，只能浏览器自动携带，防止 XSS 攻击。
4. 文件下载/导出
Q：前端实现文件下载，后端要加什么响应头？
A：
Content-Disposition: attachment; filename="xxx.xlsx"，告诉浏览器这是下载文件，不是直接打开。
5. Content-Type（必问）
Q：常见的 Content-Type 有哪些？
A：
application/json：接口数据
application/x-www-form-urlencoded：普通表单
multipart/form-data：文件上传
text/html：网页
6. 重定向
Q：301/302 跳转靠哪个响应头？
A：
Location，值是跳转地址。
四、响应头分类记忆
| 分类 | 响应头 | 作用 |
|---|---|---|
| 格式类型 | Content-Type | 告诉浏览器数据格式 |
| 缓存控制 | Cache-Control | 控制缓存策略 |
| 跨域 | Access-Control-Allow-Origin | 解决跨域 |
| Cookie | Set-Cookie | 服务器种 Cookie |
| 重定向 | Location | 跳转地址 |
| 文件下载 | Content-Disposition | 触发下载 |
| 协商缓存 | ETag / Last-Modified | 判断文件是否变化 |
| 长度 | Content-Length | 响应体字节数 |
五、快速记忆
响应头常考八个：
Content-Type 格式类型
Cache-Control 缓存控制
Access-Control 跨域核心
Set-Cookie 种 Cookie
Location 重定向
Content-Disposition 文件下载
ETag 协商缓存
Last-Modified 协商缓存
面试口诀：
跨域找 Access-Control
缓存看 Cache-Control
格式问 Content-Type
下载找 Content-Disposition六、完整示例
html
HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Content-Length: 348
Cache-Control: max-age=3600, public
Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Credentials: true
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Lax
{
"code": 200,
"message": "success",
"data": {}
}