前端八股浏览器网络（1）---响应头

一、什么是响应头？

响应头是 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=----WebKitFormBoundary

2. 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=86400

3. 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: true

4. 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": {}
}