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

一、初识 HTTP 协议

1. 浏览网址过程

2. 什么是HTTP

3. 协议分析

发展

报文

1）Method

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

2）安全&幂等

Safe (安全的)︰不会修改服务器的数据的方法
- 例：GET、HEAD、OPTIONS
ldempotent(幂等)︰同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的
所有safe的方法都是ldempotent 的
- 例：GET、HEAD、OPTIONS、PUT、DELETE

3）状态码

状态码组	说明
1xx	指示信息，表示请求已接收，继续处理
2xx	成功，表示请求已被成功接收、理解、接受
3xx	重定向，要完成请求必须进行更进—步的操作
4xx	客户端错误，请求有语法错误或请求无法实现
5xx	服务器端错误，服务器未能实现合法的请求

状态码	说明
200	OK，客户端请求成功
301	资源（网页等）被永久转移到其它URL302-临时跳转
401	Unauthorized -请求未经授权
404	请求资源不存在，可能是输入了错误的URL
500	服务器内部发生了不可预期的错误
504	Gateway Timeout，网关或者代理的服务器无法在规定的时间内获得想要的响应

4）RESTful API

一种API设计风格，即Representational State Transer
- 每一个URL代表一种资源
- 客户端和服务器之间，传递这种资源的某种表现层
- 客户端通过HTTP method，对服务器端资源进行操作，实现“表现层状态转换”

请求	返回码	含义
GET /zoos	200 OK	列出所有动物园，服务器成功返回了
POST /zoos	201 CREATED	新建一个动物园，服务器创建成功
PUT /zoos/ID	400 INVALID REQUEST	更新某个指定动物园的信息(提供该动物园的全部信息) 用户发出的请求有错误，服务器没有进行新建或修改数据的操作
DELETE /zoos/ID	204 NO CONTENT	删除某个动物园，删除数据成功

5）常用请求头

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

6）常用响应头

响应头	说明
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头部（譬如为*)

7）缓存

强缓存
- Expires，时间戳
- Cache-Control
  - 可缓存性
    - no-cache：协商缓存验证
    - no-store：不使用任何缓存
  - 到期
    - max-age：单位是秒，存储的最大周期，相对于请求的时间
  - 重新验证*重新加载
    - must-revalidate：一旦资源过期，在成功向原始服务器验证之前，不能使用
协商缓存
- Etag/lf-None-Match：资源的特定版本的标识符，类似于指纹
- Last-Modified/If-Modified-Since：最后修改时间

8）cookie

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

9）HTTP2

HTTP2概述：更快、更稳定、更简单

二进制

帧(frame): HTTP/2通信的最小单位,每个帧都包含帧头，至少也会标识出当前帧所属的数据流。

交错发送，接收方重阻止

消息：与逻辑请求或响应消息对应的完整的一系列帧。
数据流：已建立的连接内的双向字节流,可以承载一条或多条消息。

服务器推送

HTTP/2连接都是永久的，而且仅需要每个来源一个连接
流控制：阻止发送方向接收方发送大量数据的机制

10）HTTPS

HTTPS概述

HTTPS : Hypertext TransferProtocol Secure
经过TSL/SSL加密
对称加密︰加密和解密都是使用同一个密钥
非对称加密，加密和解密需要使用两个不同的密钥∶公钥(public key)和私钥(private key)

二、HTTP 协议的应用场景分析

1. 操作步骤

打开chrome
输入 www.toutiao.com
打开控制台
- 右键->检查
- F12
切换到network
- 静态资源
- 登陆

2. 场景分析-静态资源

状态码200，一定发起了请求吗？

可以是发请求成功加载的

也可以是从本地缓存加载的

还能获取到的信息：

缓存策略是怎样的？
- 强缓存
- Cache-control：一年
还有什么信息吗？
- 允许所有域名访问
- 资源类型：css

静态资源部署方案

静态资源方案∶缓存＋CDN＋文件名hash

CDN : Content DeliveryNetwork
通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

通过更改 文件名hash ，使得本地缓存匹配不到，实现更新
    常用静态资源部署：通过文件名版本号、内容hash

3. 场景分析-登录

登录业务分析：

业务场景
- 表单登录
- 扫码登录
技术方式
- SSO

查看方式：

账号密码登陆
打开控制台-network -勾选 preserve log-过滤quick_login
观察请求

为什么有options的请求？

跨域,cross-origin

同源&跨域

同源：协议名、域名、端口号都一致
跨域：不符合同源的，称为跨域

http 默认端口号80
https 默认端口号443

POST请求做了什么

向什么地址做了什么动作?
- 使用POST方法
- 目标域名https : //sso.toutiao.com目标path /quick_login/v2/
携带了哪些信息，返回了哪些信息
- 携带信息
  - Post body，数据格式为form
  - 希望获取的数据格式为json
  - 已有的cookie
- 返回信息
  - 数据格式json
  - 种cookie的信息

提问：下一次进入页面为什么能记住登陆态呢?
    使用了鉴权方案

鉴权

Session + cookie

JWT (JSON web token)

```
JWT优势：
    token唯一性
    适合登录时间短
```

提问：跳转后的网站为什么自动登录?
    使用SSO方案

SSO

SSO：单点登录（Single Sign On）

4. 场景分析-跨域

跨域

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

跨域解决方案

CORS
代理服务器
- 同源策略是浏览器的安全策略,不是HTTP的

lframe (也称JSONP方法)
- 诸多不便

三、HTTP 协议实战分析

1. 实战-浏览器篇

AJAX之XHR

XHR：XMLHttpRequest

readyState

取值	阶段	说明
0	UNSENT	代理被创建，但尚未调用open()方法
1	OPENED	open()方法已经被调用
2	HEADERS_RECEIVED	send()方法已经被调用，并且头部和状态已经可获得
3	LOADING	下载中；responseText属性已经包含部分数据
4	DONE	下载操作完成