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

协议分析

HTTP/2

更快更稳定更简单

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

二进制编码

消息:与逻辑请求或响应消息对应的完整的一系列帧。(逻辑)

数据流:已建立的连接内的双向字节流,可以承载一条或多条消息。

交错发送,接收方重组织

HTTP/2 连接都是永久的,而且仅需要每个来源一个连接（复用性）

流控制:阻止发送方向接收方发送大量数据的机制

服务器推送（如果js静态资源放在服务器端得不偿失降低处理速度）

HTTPS概述

HTTPS : Hypertext Transfer Protocol Secure

经过TSL/SSL加密

对称加密:加密和解密都是使用同一个密钥非对称加密,加密和解密需要使用两个不同的密钥:公钥(public key) 和私钥(private key)

03 常见场景

场景分析-静态资源

CSS

200请求真的在网络层吗？

from disk cache 是本地缓存没有真实经过大链路

Cache-control:max-age=31436000一年设置了强缓存策略一年有效期

Access-control-allow-origin:* 允许任意访问来源请求允许所有域名访问

Content-type:资源类型：css

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

CDN:content delivery network 分发网络提供用户体验

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

保证用户使用到最新的文件，在文件名最后加hash/版本号

设置缓存策略，放到cdn上，设置文件名hash打包策略

场景分析-登陆

业务场景

表单登录

第一个请求是option请求，请求的是sso，存在跨域，所以会有options请求

第二个请求是post

跨域

一个域名由scheme://hostname:port组成，这三部分有任意一部分有区别都是跨域

"Same-origin"

"cross-origin"

CORS跨域资源共享

当有跨域请求时，首先发起预请求，服务端是否允许跨域。（复杂请求才发起预请求大部分都是复杂请求）

跨域解决方案

CORS

代理服务器

同源策略是浏览器的安全策略，不是HTTP的

首先请求代理服务器（webpack devserver），进行转发
webpack怎么本地调试的时候一起调整

1、向request的url做了post动作想提交信息

2、表单操作，重点是资源，提交了form data，accept写明了想接收的数据

1.向什么地址做了什么动作?

使用POST方法

目标域名https: //sso.toutiao.com

目标path/quick_login/v2/

携带了哪些信息,返回了哪些信息

携带信息

Post body,数据格式为form

希望获取的数据格式为json

已有的cookie

返回信息

数据格式json

种cookie的信息(set-cookie)

鉴权（authentication）

大部分通常用session+cookie

JWT优点是唯一性，登陆时间比较短用这个方案。首次注册/忘记密码的时候，用链接识别用户身份，携带token信息识别

SSO：单点登录

假设访问A站点（server），询问sso的站点有没有登录态，登录在sso站点登录，sso server进行通信请求，sso server通信成功后在sso站点种下cookie，同时sso站点会发起重定向请求，重定向请求是专门处理callback的信息，通过重定向到a站点，识别出登录态后进行数据访问。

04 实际应用

发起HTTP协议

浏览器环境中

ajax_xhr
ajax_fetch
- XMLHttpRequet的升级版
- 使用Promise
- 模块化设计, Response,Request, Header对象
- 通过数据流处理对象,支持分块读取

HTTP使用指南（下） | 青训营笔记