HTTP Header中的常见协议及其释义

全集:developer.mozilla.org/zh-CN/docs/...

Content-Type

developer.mozilla.org/zh-CN/docs/...

例:

header 复制代码
Content-Type: text/html; charset=utf-8

// 对空格使用+号编码,其他字符不编码
Content-Type: application/x-www-form-urlencoded

// json格式
Content-Type: application/json

// 传送二进制流,使用boundary分割字段
Content-Type: multipart/form-data; boundary=something

预检请求(CORS)

developer.mozilla.org/zh-CN/docs/...

  • Access-Control-Allow-Credentials: 控制是否允许携带Cookie
  • Access-Control-Allow-Origin: 支持的来源
  • Access-Control-Allow-Method: 支持方法
  • Access-Control-Allow-Headers: 支持的请求头
  • Access-Control-Max-Age: 预检有效时间

缓存相关

developer.mozilla.org/zh-CN/docs/...

请求header 复制代码
Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached
响应header 复制代码
Cache-control: must-revalidate
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: public
Cache-control: private
Cache-control: proxy-revalidate
Cache-Control: max-age=<seconds>
Cache-control: s-maxage=<seconds>

字段说明

可缓存性

字段名 释义
public 表明响应可以被任何对象(包括:发送请求的客户端,代理服务器,等等)缓存,即使是通常不可缓存的内容。(例如:1.该响应没有max-age指令或Expires消息头;2. 该响应对应的请求方法是 POST 。)
private 表明响应只能被单个用户缓存,不能作为共享缓存(即代理服务器不能缓存它)。私有缓存可以缓存响应内容,比如:对应用户的本地浏览器。
no-cache 在发布缓存副本之前,强制要求缓存把请求提交给原始服务器进行验证 (协商缓存验证)。
no-store 缓存不应存储有关客户端请求或服务器响应的任何内容,即不使用任何缓存。

到期

字段名 释义
max-age=<seconds> 设置缓存存储的最大周期,超过这个时间缓存被认为过期 (单位秒)。与Expires相反,时间是相对于请求的时间。
s-maxage=<seconds> 覆盖max-age或者Expires头,但是仅适用于共享缓存 (比如各个代理),私有缓存会忽略它。
max-stale[=<seconds>] 表明客户端愿意接收一个已经过期的资源。可以设置一个可选的秒数,表示响应不能已经过时超过该给定的时间。
min-fresh=<seconds> 表示客户端希望获取一个能在指定的秒数内保持其最新状态的响应。
stale-while-revalidate=<seconds> 表明客户端愿意接受陈旧的响应,同时在后台异步检查新的响应。秒值指示客户愿意接受陈旧响应的时间长度。
stale-if-error=<seconds> 表示如果新的检查失败,则客户愿意接受陈旧的响应。秒数值表示客户在初始到期后愿意接受陈旧响应的时间。

重新验证和重新加载

字段名 释义
must-revalidate 一旦资源过期(比如已经超过max-age),在成功向原始服务器验证之前,缓存不能用该资源响应后续请求。
proxy-revalidate 与 must-revalidate 作用相同,但它仅适用于共享缓存(例如代理),并被私有缓存忽略。
immutable 表示响应正文不会随时间而改变。资源(如果未过期)在服务器上不发生改变,因此客户端不应发送重新验证请求头(例如If-None-Match或 If-Modified-Since)来检查更新,即使用户显式地刷新页面。在 Firefox 中,immutable 只能被用在 https:// transactions. 有关更多信息,请参阅这里
no-transform 不得对资源进行转换或转变。Content-EncodingContent-RangeContent-Type等 HTTP 头不能由代理修改。例如,非透明代理或者如Google's Light Mode可能对图像格式进行转换,以便节省缓存空间或者减少缓慢链路上的流量。no-transform指令不允许这样做。
only-if-cached 表明客户端只接受已缓存的响应,并且不要向原始服务器检查是否有更新的拷贝。

例子

禁止缓存

发送如下响应头可以关闭缓存。此外,可以参考ExpiresPragma消息头。

yaml 复制代码
Cache-Control: no-store

缓存静态资源

对于应用程序中不会改变的文件,你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件,例如图像,CSS 文件和 JavaScript 文件。另请参阅 Expires 标题。

arduino 复制代码
Cache-Control:public, max-age=31536000

需要重新验证

指定 no-cachemax-age=0, must-revalidate 表示客户端可以缓存资源,每次使用缓存资源前都必须重新验证其有效性。这意味着每次都会发起 HTTP 请求,但当缓存内容仍有效时可以跳过 HTTP 响应体的下载。

HTTPCopy to Clipboard

yaml 复制代码
Cache-Control: no-cache

HTTPCopy to Clipboard

ini 复制代码
Cache-Control: max-age=0, must-revalidate

注意: 如果服务器关闭或失去连接,下面的指令可能会造成使用缓存。

HTTPCopy to Clipboard

ini 复制代码
Cache-Control: max-age=0

断点续传

developer.mozilla.org/zh-CN/docs/...

服务器使用 HTTP 响应头 Accept-Ranges 标识自身支持范围请求 (partial requests)。字段的具体值用于定义范围请求的单位。

当浏览器发现Accept-Ranges头时,可以尝试继续中断了的下载,而不是重新开始。

  • Accept-Range: none/bytes

none时,浏览器会禁止接收bytes

  • Content-Range
sql 复制代码
Content-Range: <unit> <range-start>-<range-end>/<size>

Content-Range: <unit> <range-start>-<range-end>/*

Content-Range: <unit> */<size>

代理、隧道的区别

  • 正向代理

    • 同样是通过第三方代理,隐藏访问来源,如通过代理,访问某些小网站
  • 反向代理

    • 通过第三方代理请求,隐藏背后真实的服务,前端常用于解决域名问题
  • 隧道

    • 在两端加上编码或协议转换工具,工具之前自由传输,到端后,再解码出来
相关推荐
腾讯TNTWeb前端团队5 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪9 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy9 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom10 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom10 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom10 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom10 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom10 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试