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>

代理、隧道的区别

  • 正向代理

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

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

    • 在两端加上编码或协议转换工具,工具之前自由传输,到端后,再解码出来
相关推荐
会发光的猪。12 分钟前
【 ElementUI 组件Steps 步骤条使用新手详细教程】
前端·javascript·vue.js·elementui·前端框架
我家媳妇儿萌哒哒13 分钟前
el-table合并单元格之后,再进行隔行换色的且覆盖表格行鼠标移入的背景色的实现
前端·javascript·elementui
baiduguoyun28 分钟前
react的import 导入语句中的特殊符号
前端·react.js
前端青山29 分钟前
webpack指南
开发语言·前端·javascript·webpack·前端框架
NiNg_1_23441 分钟前
ECharts实现数据可视化入门详解
前端·信息可视化·echarts
励志前端小黑哥1 小时前
有了Miniconda,再也不用担心nodejs、python、go的版本问题了
前端·python
喵叔哟1 小时前
重构代码之取消临时字段
java·前端·重构
还是大剑师兰特2 小时前
D3的竞品有哪些,D3的优势,D3和echarts的对比
前端·javascript·echarts
王解2 小时前
【深度解析】CSS工程化全攻略(1)
前端·css
一只小白菜~2 小时前
web浏览器环境下使用window.open()打开PDF文件不是预览,而是下载文件?
前端·javascript·pdf·windowopen预览pdf