这是我参与「第四届青训营」笔记创作活动的的第7天

HTTP 实用指南

1. 初识 HTTP

超文本传输协议（Hyper Text Transfer Protocol）
- 超文本：可以承载多种题材（HTML 、 CSS 、……）
应用层协议，基于 TCP 协议
- HTTP 是应用层协议， TCP 协议为传输层协议
请求响应
简单可扩展
- 可以自定义一些请求头
无状态
- 每个请求之间都是孤立的

2. 协议分析

发展

报文分析

报文实例：

1 请求方法：
请求特点：
Safe（安全的）：不会修改服务器的数据的方法（GET HEAD OPTIONS）。
Idempotent（幂等）：同样的请求被指向一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有 Safe 方法都是 Idempotent 的（GET HEAD OPTIONS PUT DELETE）。

2. 状态码及含义：

3. 常用请求头及含义： Cache-Control 、 If-Modified-Since 、 Expires 、 Max-age 、 If-None-Match 都是和缓存相关的协议头；
Cookie 携带用户状态信息；
Referer 、 Origin 都表示请求来源相关的字段， Origin 可以做接口访问权限控制。

4. 常用响应头及含义： Cache-Control 、 Last-Modified 、 Expires 、 Max-age 、 Etag 跟请求头缓存相关能对上的字段。
Set-Cookie 告诉浏览器我要设置哪些 cookie 信息，以及这些 cookie 信息有一些怎样的权限控制。

5. 缓存
缓存分为两类：

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

缓存处理顺序：

6. cookie secure 、 HttpOnly 、 SameSite 可以加强 cookie 的安全性。

7. RESTful API
RESTful API 是一种 API 设计风格。
Representational State Transfer （REST ，表现层状态转化）。
应遵循的关键点：

每一个 URL 代表一种资源；
客户端和服务器之间，传递这种资源的某种表现层；
客户端通过 HTTP method ，对服务器端资源进行操作，实现“表现层状态转化”。

例如：

HTTP/2 概述

更快、更稳定、更简单。

帧（frame）
- HTTP/2 通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流。
- 在 HTTP/1.x 中以完整的文本进行传输，在 HTTP/2 中把每个 message 划分成若干帧，每个帧至少包含一个帧头，帧以二进制编码的形式进行传输。
- 帧交错发送，接收方重组织。
消息
- 与逻辑请求或响应消息对应的完整的一系列帧聚合在一起。
数据流
- 已建立的连接内的双向字节流，可以承载一条或多条消息。
HTTP/2 连接都是永久的，而且仅需要每个来源一个连接
- 每一个来源或目标地址建立连接后是可以被永久运用的（复用性）。
流控制
- 阻止发送方向接收方发送大量数据的机制。流控制的例子：看视频看了一部分就暂停了，浏览器不会把后续视频缓存下来，浏览器不会把资源放在接收请求、接收视频上，它会把带宽、计算资源用在优先级更高的其它应用上。
  服务器推送：浏览器端请求了 page.html ， Server 接收了这个请求并且把 page.html 返回给浏览器，但是 Server 又分析了 page.html ，发现里面引用了 secript.js 和 style.css , 服务器认为你接下来大概率要向我要这两份文件，为了加快浏览器的处理效率，服务器就提前把这两份文件一起发给浏览器。

HTTPS 概述

在 HTTP 的基础上经过 TSL/SSL 加密，使其安全性更高。对称加密：加密和解密都是使用同一个密钥。
非对称加密：加密和解密需要使用两个不同的密钥（公钥（public key）和私钥（private key））。
浏览器证书校验不合法警告提示：

3. 常见场景

静态资源

静态资源方案：缓存+ CDN + 文件名 hash。

状态码是 200 就一定发起了请求吗？不一定 强缓存,30天（cache-control: max-age=2592000（单位：秒））
允许所有域名访问（access-control-allow-origin: *）
Content Delivery Network （CDN ，内容分发网络）

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

文件名 hash 可以确保每次拿到的文件最新（因为缓存，缓存有效期内同名文件都不能更新到，例子：在 vendor.3f3422b8.css 中，3f3422b8 每次文件有变时文件名都会变化）。

静态资源部署可以性能优化、用户体验优化等。

今日头条登录

为什么有 options 的请求？跨域（cross-origin ， sso.toutiao.com 和 www.toutiao.com）
如何处理跨域请求？

CORS
代理服务器
- 同源策略是浏览器的安全策略，不是 HTTP 的
Iframe
- 诸多不便

-------------------------------------------------- CORS --------------------------------------------------- 请求分两类：

简单请求
复杂请求（大部分）

只有在复杂请求的情况下才会发起跨域请求。
Cross-Origin Resource Sharing （CORS ，跨域资源共享）。
处理跨域请求的步骤：

先发起一个预请求（OPTIONS）：获取服务端是否允许该跨源请求
允许的话，开始以下流程

跨域相关协议头：

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 ============================== ----------------------------------------------- 代理服务器 ------------------------------------------------
代理服务器跟浏览器同域。
=========================== 代理服务器 ============================= 下一次进入页面为什么能记住登录态？
浏览器有自动携带 cookie 策略（不影响无状态）。

鉴权：

Session + cookie
Server 接收到正确的用户名和密码之后会生成 session 并且存储起来，同时通过响应头 Set-Cookie 将 session 发给浏览器。
JWT （JSON web token）
Server 接收到正确的用户名和密码之后会生成 token ，浏览器把收到的 token 放到请求头相应字段里面提交给 Server ， Server 会把这个 token 解析出来，看看 token 是不是有效的，携带的是那个用户的信息，解析做验证然后返回给我们。
访问不同域名的网站，但是登录的用户被自动带到新网站
技术方式： Single Sign On （SSO ，单点登录）