这是我参与「第五届青训营」伴学笔记创作活动的第 2 天

HTTP基础

1.初识HTTP

HTTP是一种超文本传输协议。它的特点有：

HTTP中请求的一些方法：

方法	描述
GET	请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据
POST	用于将实体提交到指定的资源，通常导致在服务器上的状态变化或者副作用
PUT	用请求有效载荷替换目标资源的所有当前标识
DELETE	删除指定的资源
HEAD	请求一个与GET请求的响应相同的响应，但是没有响应体
CONNECT	建立一个到由目标资源标识的服务器的隧道
OPTIONS	用于描述目标资源的通信选项
TRACE	沿着到目标资源的路径执行一个消息环回测试
PATCH	用于对资源应用部分修改

安全的方法：也就是不会修改服务器数据的方法。
比如：GET HEAD OPTIONS

状态码一般是三位数：

请求头	描述
Accept	接收类型，表示浏览器支持的MIME类型（对标服务端返回的Content-Type）
Content-Type	客户端发送出去实体内容的类型
Cache-Control	指定请求和响应遵循的缓存机制，如no-cache
If-Modified-Since	对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
EXpires	缓存控制，这个时间内不会请求，直接使用缓存，服务端时间
Max-age	代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
If-None-Match	对于服务端ETag，用来匹配文件内容是否改变（非常精确）
Cookie	有cookie并且同域访问时会自动带上
Referer	该页面的来源URL（使用与所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段）
Origin	最初的请求是从哪里发起的（只会精确到端口），Origin比Referer更尊重隐私
User-Agent	用户客户端的一些必要信息，比如UA头部等

响应头	描述
Content-Type	服务端返回的实体内容的类型
Cache-Control	指定请求和响应遵循的缓存机制，如no-cache
Last-Modified	请求资源的自后修改时间
Expires	应该在什么时候认为文档已经过期，从而不再缓存它
Max-age	客户端的本地资源应该缓存多少秒，开启Cache-Control才有效
ETag	资源的特定版本的标识符，ETags类似于指纹
Set-Cookie	设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端
Server	服务器的一些相关信息
Access-Control-Allow-Origin	服务器端允许的请求Origin头部（比如：*）

前面我们提到HTTP的请求头以及响应头，都有缓存这个选项。

现在我们就来聊聊HTTP中的缓存，在这里缓存分为两种：

两者的区别就是：强缓存浏览器会看本地有没有缓存，有的话，浏览器直接拿来用；协商缓存呢，浏览器看到本地有缓存，但是不会马上拿来用，会先给服务端那边确认一下，确认成功之后才可以使用。

强缓存里面的一些配置：

协商缓存的一些配置：

set-Cookie-response字段


Name=value	各种cookie的名称和值
Expires=Date	Cookie的有效期，缺省时Cookie仅在浏览器关闭之前有效
Path=Path	限制指定Cookie的发送范围的文件目录，默认为当前
Domain=domain	限制cookie生效的域名，默认为创建cookie的服务域名
secure	仅在HTTPS安全链接时，才可以发送Cookie
HttpOnly	JavaScript脚本无法获得Cookie
SameSite=[None\|Strict\|Lax]	None:同站、跨站请求都可以发送；Strict：仅在同站发送；允许与顶级导航一起发送，并将第三方网站发起的GET请求一起发送

为了让用户更快的拿到静态资源，我们有一种静态资源部署方案：缓存+CDN+文件名hash