HTTP实用指南

62 阅读5分钟

一、什么是HTTP

  • Hyper Text Transfer Protocol超文本传输协议
  • 应用层协议,基于TCP协议
  • 请求 相应
  • 简单可扩展
  • 无状态

流程:
日常应用中,用户在浏览器中输入网址,浏览器处理输入信息,传递给浏览器内核,向internet发出请求,服务器处理后读取响应。之后进行渲染,完成对页面的加载。

image.png

二、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,对服务器端资源进行操作,实现“表现层状态转化”。

image.png

image.png

image.png

缓存:
浏览器缓存分为强缓存和协商缓存。
1.强缓存是根据返回头中的Expires(时间戳)或者Cache-Control两个字段来控制的。强缓存的单位是秒,最大周期相对于请求的时间。一旦资源过期,在成功向原始服务器验证之前,不能使用。
2.协商缓存是由服务器来确定缓存资源是否可用。由Etag/If-None-Match(资源的特定版本的标识符,类似于指纹)和Last-Modified/If-Modified-Since(最后修改时间)两对属性决定。

四、HTTP/2概述:

  • 帧(frame):HTTP/2通信的最小单位,每个帧都包含帧头,至少也会标识出当前帧所属的数据流。
  • HTTP/2连接都是永久的,而且仅需要每个来源一个连接
  • 流控制:阻止发送方向接收方发送大量数据的机制
  • 消息:与逻辑请求或响应消息对应的完整的一系列帧
  • 数据流:已建立的连接内的双向字节流,可以承载一条或多条消息。
  • 交错发送,接收方重组织

image.png

四、协议分析-发展

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

image.png

HTTPS的缓存策略:

  • 强缓存
  • Cache-control:一年
  • 允许所有域名访问
  • 资源类型:css

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

  • CDN:Content Delivery Network
  • 通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务
    CDN简单原理图: image.png

五、场景分析-登录

  • 业务场景

    • 表单登录
    • 扫码登录
  • 技术方式

    -SSO

image.png

利用开发者工具观察:

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

image.png

为什么会有options的请求?
此处出现了跨域,cross-orgin

跨域举例: 原地址:www.example.com:443
示例地址:

跨域预请求:获知服务端是否允许该跨源请求(复杂请求)

跨域解决方案

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

image.png

登录动作流程:
1.向什么地址做了什么动作?

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

  • 携带信息

    • Post body,数据格式为form
    • 希望获取的数据格式为json
    • 已有的cookie
  • 返回信息

    • 数据格式json
    • cookie的信息

下一次进入页面为什么能记住登录态呢?

  • 鉴权:Session+cookie 会话+cookie
  • JWT(JSON web token)

AJAX之XHR

  • XHR:XMLHttpRequest
  • readyState:

image.png

AJAX之Fetch

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

image.png

标准库:HTTP/HTTPS

  • 默认模块,无需安装其他依赖
  • 功能有限

image.png

常用的请求库:axios

  • 支持浏览器、nodejs环境
  • 丰富的拦截器

image.png

稳定性:

  • 重试机制:①、超时;②、错误
  • 缓存
  • 数据安全:①、HTTPS;②、劫持