一、什么是响应头？
响应头是 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 | 缓存过期后必须重新验证 |
# 示例 Cache-Control: no-cache Cache-Control: max-age=3600, public Cache-Control: private, max-age=864003. Access-Control-Allow-Origin（跨域核心）
作用：告诉浏览器允许哪些域名访问资源，解决跨域问题。
# 允许所有域名（不推荐，不安全） 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。
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: 348
6. Location（重定向地址）
作用：配合 301/302 状态码，告诉浏览器跳转到哪个地址。
HTTP/1.1 302 Found Location: https://www.example.com/new-page
7. Content-Disposition（文件下载）
作用：告诉浏览器这是下载文件，不是直接打开。
# 内联显示（默认） Content-Disposition: inline # 附件下载 Content-Disposition: attachment; filename="report.pdf" # 中文文件名需要编码 Content-Disposition: attachment; filename*=UTF-8''%E6%8A%A5%E5%91%8A.pdf
8. 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
六、完整示例
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": {} }
