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

一、什么是响应头响应头是 HTTP 响应中服务器向浏览器传递的附加信息用于描述响应数据类型、缓存策略、跨域权限、Cookie 设置等不包含实际业务数据。HTTP 响应结构 ┌─────────────────────────────────────────┐ │ 状态行HTTP/1.1 200 OK │ ├─────────────────────────────────────────┤ │ 响应头 │ │ Content-Type: application/json │ │ Cache-Control: max-age3600 │ │ Access-Control-Allow-Origin: * │ ├─────────────────────────────────────────┤ │ 空行 │ ├─────────────────────────────────────────┤ │ 响应体{code:200,data:{...}} │ └─────────────────────────────────────────┘二、核心响应头详解1. Content-Type内容类型作用告诉浏览器当前返回的数据是什么格式浏览器根据它决定如何解析内容。Content-Type说明使用场景application/jsonJSON 数据前后端分离接口最常用application/x-www-form-urlencoded表单格式普通表单提交multipart/form-data混合格式文件上传text/htmlHTML 页面网页返回text/plain纯文本普通文本image/png、image/jpeg图片图片资源application/octet-stream二进制流文件下载# 示例 Content-Type: application/json; charsetutf-8 Content-Type: multipart/form-data; boundary----WebKitFormBoundary2. Cache-Control缓存控制作用控制浏览器如何缓存响应。值说明no-cache每次都要去服务器协商缓存能用缓存才用no-store真正不缓存每次都全新请求max-age3600缓存 3600 秒public允许任何中间节点缓存CDN、代理private只允许浏览器缓存must-revalidate缓存过期后必须重新验证# 示例 Cache-Control: no-cache Cache-Control: max-age3600, public Cache-Control: private, max-age864003. 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: namevalue; Path/; ExpiresWed, 21 Oct 2025 07:28:00 GMT; HttpOnly; Secure; SameSiteLax属性说明属性说明HttpOnlyJS 无法读取防 XSS 攻击Secure只在 HTTPS 下传输SameSite防 CSRF 攻击Strict/Lax/NoneExpires/Max-Age过期时间PathCookie 生效路径DomainCookie 生效域名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; filenamereport.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前端跨域报错一般是哪个响应头没配AAccess-Control-Allow-Origin。没有这个头浏览器会拦截响应报 CORS 错误。Q带 Cookie 跨域要哪些响应头AAccess-Control-Allow-Origin不能为*必须具体域名Access-Control-Allow-Credentials: true2. 缓存相关高频QCache-Control: no-cache 和 no-store 区别Ano-cache不是不缓存是每次都要去服务器协商缓存能用缓存才用no-store真正不缓存每次都全新请求Q协商缓存靠哪两个响应头AETag和Last-Modified配合请求头的If-None-Match和If-Modified-Since。3. Cookie 相关Q服务器怎么种 CookieA通过响应头Set-Cookie。QSet-Cookie 里 HttpOnly 是什么意思AJS 无法读取该 Cookie只能浏览器自动携带防止 XSS 攻击。4. 文件下载/导出Q前端实现文件下载后端要加什么响应头AContent-Disposition: attachment; filenamexxx.xlsx告诉浏览器这是下载文件不是直接打开。5. Content-Type必问Q常见的 Content-Type 有哪些Aapplication/json接口数据application/x-www-form-urlencoded普通表单multipart/form-data文件上传text/html网页6. 重定向Q301/302 跳转靠哪个响应头ALocation值是跳转地址。四、响应头分类记忆分类响应头作用格式类型Content-Type告诉浏览器数据格式缓存控制Cache-Control控制缓存策略跨域Access-Control-Allow-Origin解决跨域CookieSet-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; charsetutf-8 Content-Length: 348 Cache-Control: max-age3600, public Access-Control-Allow-Origin: https://example.com Access-Control-Allow-Credentials: true ETag: 33a64df551425fcc55e4d42a148795d9f25f89d4 Set-Cookie: sessionIdabc123; Path/; HttpOnly; Secure; SameSiteLax { code: 200, message: success, data: {} }