这是我参与「第五届青训营 」伴学笔记创作活动的第10天
课堂笔记
视频地址
ppt地址 HTTP实用指南.pptx - 飞书云文档 (feishu.cn)
课前 （必须）
安装 Chrome浏览器
如果有其他浏览器也可以，但建议使用Chrome
- 打开 Google Chrome 网络浏览器，按照提示下载安装即可
【可选】复习计算机网络相关知识
重点放在网络模型和HTTP协议相关知识点
一、本堂课重点内容：
HTTP协议的基本定义和特点
HTTP协议的发展历程和报文结构
HTTP的场景实践
- HTTP 协议简介
- HTTP 协议的基本结构与发展历程
- 常见场景中的 HTTP 协议应用
- 在不同的环境中发起 HTTP 请求
- 知识扩展，了解更多网络通信协议
二、详细知识点介绍：
初识HTTP
超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。
用户输入搜索内容 -> browser进程处理输出信息 -> 浏览器内核发起请求 -> 经过网络到达服务器 -> 服务器响应后经由网络回到浏览器 -> 浏览器内核读取响应 -> 浏览器内核渲染 -> 页面加载完成
什么是HTTP？
Hyper Text Transfer Protocol （超文本传输协议）
属于应用层协议，基于TCP协议
请求 响应
简单可扩展（在 HTTP/1.0 中出现的 HTTP 标头（header）让协议扩展变得非常容易。只要服务端和客户端就新标头达成语义一致，新功能就可以被轻松加入进来）
无状态（没有记忆能力，每个请求都是独立的）
协议分析
发展
报文
请求报文
响应报文
Method
| Method | |
|---|---|
| GET | 请求一个指定资源的表示形式。使用 GET 的请求应该只被用于获取数据 |
| POST | 用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用 |
| PUT | 用请求有效载荷替换目标资源的所有当前表示 |
| DELETE | 删除指定的资源 |
| HEAD | 请求一个与 GET 请求的响应相同的响应，但没有响应体 |
| CONNECT | 建立一个到由目标资源标识的服务器的隧道 |
| OPTIONS | 用于描述目标资源的通信选项 |
| TRACE | 沿着到目标资源的路径执行一个消息环回测试 |
| PATCH | 用于对资源应用部分修改 |
Method特点
| 特点 | 具体 | 例如 |
|---|---|---|
| safe(安全的) | 不会修改服务器的数据的方法 | 如GET,HEAD,OPTIONS |
| Idempotent(幂等) | 同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是Idempotent | 如GET,HEAD,OPTIONS,PUT,DELETE |
状态码
几种常见的状态码
| 状态码 | 说明 |
|---|---|
| 200 OK | 客户端请求成功 |
| 301 | 资源（网页等）被永久转移到其他 URL |
| 302 | 临时跳转 |
| 401 Unauthorized | 请求未授权 |
| 404 | 请求资源不存在，可能是输入了错误的 URL |
| 500 | 服务器内部发生了不可预期的错误 |
| 504 Gateway Timeout | 网关或者代理的服务器无法在规定时间内获得想要的响应 |
RESTful API
RESTful API ：一种 API 设计风格
REST - Representational State Transfer
（1）每一种URI代表一种资源
（2）客户端和服务器之间，传递这种资源的某种表现层
（3）客户端通过HTTP method，对服务器端资源进行操作，实现“表现层状态转化”
| 请求 | 返回码 | 含义 |
|---|---|---|
| GET /zoos | 200 OK | 列出所有动物园，服务器成功返回了 |
| POST /zoos | 201 CREATED | 新建一个动物园，服务器创建成功 |
| PUT /zoos/ID | 400 INVALID REQUEST | 更新某个指定动物园的信息（提供该动物园的全部信息） 用户发出的请求有错误，服务器没有进行新建或修改数据的操作 |
| DELETE /zoos/ID | 204 NO CONTENT | 删除某个动物园，删除数据成功 |
常用请求头
| 请求头 | 说明 |
|---|---|
| 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 头部（譬如为 * ） |
缓存
强缓存：不会向服务器发送请求，直接从缓存中读取资源
协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源。
Cookie
Set-Cookie-response
| Name=value | 各种 cookie 的名称和值 | ||
|---|---|---|---|
| Expires=Data | Cookie 的有效期，缺省时 Cookie 仅在浏览器关闭之前有效 | ||
| Path=Path | 限制指定 Cookie 的发送范围的文件目录，默认为当前 | ||
| Domain=domain | 限制 Cookie 生效的域名，默认为创建 Cookie 的服务域名 | ||
| secure | 仅在 HTTPS 安全连接时，才可以发送 Cookie | ||
| HttpOnly | JavaScript 脚本无法获得 Cookie | ||
| SameSite=[None | Strict | Lax] | None 同站、跨站请求都可发送 Strict 仅在同站发送 允许与顶级导航一起发送，并将与第三方网站发起的 GET 请求一起发送 |
发展
HTTP/2
更快、更稳定、更简单
1.帧(frame)：HTTP/2通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流
2.传输的是二进制
3.消息：与逻辑请求或响应消息对应的完整的一系列帧
4.数据流：已建立的连接内的双向字节流，可以承载一条或多条消息
5.交错发送，接收方重组织
6.HTTP/2连接都是永久的，而且仅需要每个来源一个连接
7.流控制：阻止发送方向接收方发送大量数据的机制
8.服务器推送
HTTPS
1.HTTPS : Hypertext Transfer Protocol Secure
2.经过TSL/SSL加密
3.对称加密：加密和解密都是使用同一个密钥
4.非对称加密：加密和解密需要使用两个不同的密钥：公钥（public key)和私钥（private key）
常见场景
静态资源
例如今日头条网站 -> f12 -> network -> css -> index.xxx.cs -> status code是200 思考状态码是200，一定发起了网络请求吗？
可以看到是from cache,说明请求从本地缓存中获得响应，没有经过网络
根据此响应头，可以得出以下信息：
Cache-control是强缓存相关的协议头，说明静态资源设置了强缓存的缓存策略，max-age（生存周期）单位是秒，换算一下就是一年有效期
access-control-allow-origin是*，说明允许任意来源访问
content-type（携带实际信息的资源类型）：css
静态资源方案：缓存 + CDN + 文件名hash
CDN：Content Delivery Network (内容分发网络)
通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
文件名hash：当文件内容发生变化时，变换文件名或文件名加上版本号，以确保在很长的缓存期内，用户拿到的文件内容是最新的
登录
例如登录今日头条网站 -> f12 -> network -> 勾选preserve log -> 过滤quick _login -> 选择all -> 观察请求
可以发现一个请求method是OPTIONS
跨域
跨域解决方案
- CORS
- 代理服务器
同源策略是浏览器的安全策略，不是HTTP的 - Iframe 诸多不便
向什么地址做了什么动作？
使用POST方法
目标域名：sso.toutiao.com
目标：path/quick_login/v2/
携带了哪些信息，返回了哪些信息？
携带信息：
Post body，数据格式为form
希望获取的数据格式为json（accept)
已有的cookie
返回信息：
数据格式json(content-type)
种cookie信息(set-cookie)
下一次进入页面为什么能记住登录状态？由于鉴权
鉴权
跳转后的网站为什么自动登录？由于SSO单点登录
SSO单点登录
实际应用
浏览器
AJAX之XHR
AJAX之Fetch
node
标准库HTTP/HTTPS
常用的请求库：axios
用户体验
网络优化
稳定性
拓展
WebSocket
浏览器与服务器进行全双工通讯的网络技术
典型场景：实时性要求高，例如聊天室
URL 使用 ws:// 或 wss:// 等开头
QUIC
三、课后个人总结：
本节课学习了HTTP协议及其报文结构，对HTTP的常见场景以及实际应用有了一定的了解。以前看不懂network中header等与网络连接相关的信息，现在能看懂一些了，也知道了token和cookie之间的关系。
四、引用参考：
五、课后
HTTP学习资料推荐
学习建议：
-
相对来讲HTTP协议的常用知识不复杂，“基础篇”材料中，MDN 可以作为工具查询，“图解 HTTP” 与 “HTTP 权威指南” 选择一个阅读，作为体系化学习资料
-
进阶篇中提供的是标准协议描述，感兴趣的同学阅读即可，也可作为工具使用
-
基础篇
- An overview of HTTP - HTTP | MDN
- 图解 HTTP
- HTTP 权威指南
-
进阶篇
