一、什么是HTTP
- Hyper Text Transfer Protocol超文本传输协议
- 应用层协议,基于TCP协议
- 请求 相应
- 简单可扩展
- 无状态
流程:
日常应用中,用户在浏览器中输入网址,浏览器处理输入信息,传递给浏览器内核,向internet发出请求,服务器处理后读取响应。之后进行渲染,完成对页面的加载。
二、Method
Method即HTTP的请求方法。有以下种类:
- GET:请求一个指定资源的表示形式,使用GET的请求应该只被用于获胜数据。
- POST:用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用
- PUT:用请求有效载荷替换目标资源的所有当前表示
- DELETE:删除指定的资源
- HEAD:请求一个也GET请求响应相同的响应,但没有响应体
- CONNECT:建立一个到由目标资源标识的服务器的隧道
- OPTIONS:用于描述目标资源的通信选项
- TRACE:沿着到目标资源的路径执行一个消息换回测试
- PATCH:用于对资源应用部分修改
Method特点:
Safe(安全):不会修改服务器的数据的方法
Idempotent(幂等):同样的请求被执行一次与连续执行多次的效果是一样的。所有safe的方法都是Idempotent的。
状态码:
- 200 OK-客户端请求成功
- 301-资源(如网页)被永久转移到其他URL
- 302-临时跳转
- 401 Unauthorized - 请求未经授权
- 404-请求资源不存在,可能是输入了错误的URL
- 500-服务器内部发生了不可预期的错误
- 504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应。
三、协议分析-报文
RESTful API:一种API设计风格
- 每一个URI代表一种资源;
- 客户端和服务器之间,传递这种资源的某种表现层
- 客户端通过HTTP method,对服务器端资源进行操作,实现“表现层状态转化”。
缓存:
浏览器缓存分为强缓存和协商缓存。
1.强缓存是根据返回头中的Expires(时间戳)或者Cache-Control两个字段来控制的。强缓存的单位是秒,最大周期相对于请求的时间。一旦资源过期,在成功向原始服务器验证之前,不能使用。
2.协商缓存是由服务器来确定缓存资源是否可用。由Etag/If-None-Match(资源的特定版本的标识符,类似于指纹)和Last-Modified/If-Modified-Since(最后修改时间)两对属性决定。
四、HTTP/2概述:
- 帧(frame):HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流。
- HTTP/2连接都是永久的,而且仅需要每个来源一个连接
- 流控制:阻止发送方向接收方发送大量数据的机制
- 消息:与逻辑请求或响应消息对应的完整的一系列帧
- 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息。
- 交错发送,接收方重组织
四、协议分析-发展
- HTTPS: Hypertext Transfer Protocol Secure
- 经过TSL/SSL加密
- 对称加密:加密和解密都是使用同一个密钥
- 非对称加密,加密和解密需要使用两个不同的密钥:公钥(public key)和私钥(private key)
HTTPS的缓存策略:
- 强缓存
- Cache-control:一年
- 允许所有域名访问
- 资源类型:css
静态资源方案:缓存+CDN+文件名hash
- CDN:Content Delivery Network
- 通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务
CDN简单原理图:
五、场景分析-登录
-
业务场景
- 表单登录
- 扫码登录
-
技术方式
-SSO
利用开发者工具观察:
- 账号密码登录
- 打开控制台-network-勾选preserve log-过滤quick_login
- 观察请求
为什么会有options的请求?
此处出现了跨域,cross-orgin
跨域举例:
原地址:www.example.com:443
示例地址:
- www.evil.com:443 (跨域,域名不同)
- example.com.443 (跨域,二级域名不同)
- login.example.com:443 (跨域,二级域名不同)
- www.example.com:443 (跨域,不同协议)
- www.example.com:80 (跨域,不同端口)
- www.example.com:443 (同域)
- ww.example.com (同域,默认https的端口号为443)
跨域预请求:获知服务端是否允许该跨源请求(复杂请求)
跨域解决方案
- 代理服务器:同源策略是浏览器的安全策略,不是HTTP的
登录动作流程:
1.向什么地址做了什么动作?
- 使用POST方法
- 目标域名sso.toutiao.com
- 目标path/quick_login/v2/
2.携带了哪些信息,返回了哪些信息
-
携带信息
- Post body,数据格式为form
- 希望获取的数据格式为json
- 已有的cookie
-
返回信息
- 数据格式json
- cookie的信息
下一次进入页面为什么能记住登录态呢?
- 鉴权:Session+cookie 会话+cookie
- JWT(JSON web token)
AJAX之XHR
- XHR:XMLHttpRequest
- readyState:
AJAX之Fetch
- XMLHttpRequest的升级版
- 使用Promise
- 模块化设计,Response,Request,Header对象
- 通过数据流处理对象,支持分块读取
标准库:HTTP/HTTPS
- 默认模块,无需安装其他依赖
- 功能有限
常用的请求库:axios
- 支持浏览器、nodejs环境
- 丰富的拦截器
稳定性:
- 重试机制:①、超时;②、错误
- 缓存
- 数据安全:①、HTTPS;②、劫持