这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天
一、初识HTTP协议
1.什么是HTTP
- Hyper Text Transfer Protocol 超文本传输协议
- 应用层协议，基于TCP协议
- 请求 响应
- 简单可扩展
- 无状态
2.协议分析
-
HTTP/0.9单行协议
- 请求GET/mypage.html
- 响应只有HTML文档
-
HTTP/1.0构建可扩展性
- 增加了Header
- 有了状态码
- 支持多种文档类型
-
HTTP/1.1标准化协议
- 链接复用
- 缓存
- 内容协商
-
HTTP/2更优异的表现
- 二进制协议
- 压缩header
- 服务器推送
- HTTP/3
3.报文
| GET | 请求一个指定资源的表示形式.使用GET的请求应该只被用于获取数据， |
|---|---|
| POST | 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 |
| PUT | 用请求有效载荷替换目标资源的所有当前表示 |
| DELETE | 删除指定的资源 |
| HEAD | 请求一个与GET请求的响应相同的响应，但没有响应体 |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道。 |
| OPTIONS | 用于描述目标资源的通信选项。 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试。 |
| PATCH | 用于对资源应用部分修改。 |
-
Safe(安全的)：不会修改服务器的数据的方法
- GET HEAD OPTIONS
-
Idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的所有safe的方法都是Idempotent的
- GET HEAD OPTIONS PUT DELETE
4.状态码
- 200OK-客户端请求成功
- 301-资源（网页等）被永久转移到其它URL
- 302-临时跳转
- 401 Unauthorized-请求未经授权
- 404-请求资源不存在，可能是输入了错误的URL
- 500-服务器内部发生了不可预期的错误
- 504 Gateway Timeout--网关或者代理的服务器无法在规定的时间内获得想要的响应。
5.RESTful API
RESTful API:一种API设计风格；REST-Representational State Transfer
- 每一个URI代表一种资源；
- 客户端和服务器之间，传递这种资源的某种表现层；
- 客户端通过HTTP method,对服务器端资源进行操作，实现"表现层状态转化”。
6.常用请求头
| 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(适用于所有类型的请求，会精确到详细页面地址，csr拦截常用到这个字段) |
| Origin | 最初的请求是从哪里发起的（只会精确到端口)，Origin比Referer更尊重隐私 |
| User-Agent | 用户客户端的一些必要信息，如UA头部等 |
7.常用响应头
| Content-Type | 服务端返回的实体内容的类型 |
|---|---|
| Cache-Control | 指定请求和响应遵循的缓存机制，如no-cache |
| Last-Modified | 请求资源的最后修改时间 |
| Expires | 应该在什么时候认为文档已经过期，从而不再缓存它 |
| Max-age | 客户端的本地资源应该缓存多少秒，开启了Cache-Controll后有效 |
| ETag | 资源的特定版本的标识符，Etags类似于指纹 |
| Set-Cookie | 设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端 |
| Server | 服务器的一些相关信息 |
| Access-Control-Allow-Origin | 服务器端允许的请求Drigin头部（譬如为*） |
8.强缓存
-
Expires,时间戳
-
Cache-Control
-
可缓存性
- no-cache:协商缓存验证
- no-store：不使用任何缓存
-
-
到期
- max-age:单位是秒，存储的最大周期，相对于请求的时间
-
重新验证*重新加载
- must-revalidate:一旦资源过期，在成功向原始服务器验证之前，不能使用
9.协商缓存
- Etag/If-None-Match:资源的特定版本的标识符，类似于指纹
- Last-Modified/If-Modified-Since:最后修改时间
10.缓存
11.cookie
| 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请求一起发送 |
12.HTTPS概述
-
HTTPS:Hypertext Transfer Protocol Secure
-
经过TSL/SSL加密
- 对称加密：加密和解密都是使用同一个密钥
- 非对称加密，加密和解密需要使用两个不同的密钥：公钥(public key)和私钥(private key)
二、HTTP场景分析
1.静态资源
- 静态资源方案：缓存+CDN+文件名hash
- CDN:Content DeliveryNetwork
- 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
2.跨域
-
CORS (Cross-Origin Resource Sharing
-
预请求：获知服务端是否允许该跨源请求（复杂请求）
-
相关协议头
- Access-Control-Allow-Origin
- Access-Control-Expose-Headers
- Access-Control-Max-Age
- Access-Control-Allow-Credentials
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers
- Access-Control-Request-Method
- Access-Control-Request-Headers
- Origin
3.跨域解决方案
-
CORS
- 代理服务器
- 同源策略是浏览器的安全策略，不是HTTP的
-
Iframe
- 诸多不便
三、HTTP实战
1.AJAX之XHR
- XHR:XMLHttpRequest
- readyState
| 0 | UNSENT | 代理被创建，但尚未调用open（）方法 |
|---|---|---|
| 1 | OPENED | open（）方法已经被调用 |
| 2 | HEADERS_RECEIVED | send0方法已经被调用，并且头部和状态已经可获得 |
| 3 | LOADING | 下载中；responseText属性已经包含部分数据 |
| 4 | DONE | 下载操作已完成。 |
2.AJAX之Fetch
- XMLHttpRequet的升级版
- 使用Promise
- 模块化设计，Response,Request,Header对象
- 通过数据流处理对象，支持分块读取
3.常用的请求库：axios
- 支持浏览器、nodejs环境
- 丰富的拦截器
4.稳定性
- 重试是保证稳定的有效手段，但要防止加剧恶劣情况
- 缓存合理使用，作为最后一道防线
5.通信方式
-
WebSocket
- 浏览器与服务器进行全双工通讯的网络技术
- 典型场景：实时性要求高，例如聊天室
- URL使用wS:/或wSs:/等开头
-
QUIC:Quick UDP Internet Connection
- 0-RTT建联（首次建联除外)。
- 类似TCP的可靠传输。
- 类似TLS的加密传输，支持完美前向安全。
- 用户空间的拥塞控制，最新的BBR算法。
- 支持h2的基于流的多路复用，但没有TCP的HOL问题。
- 前向纠错FEC。
- 类似MPTCP的Connection migration。
