初识HTTP | 青训营

98 阅读2分钟

结构

image.png

初识HTTP协议

初识HTTP

浏览器0到渲染做了什么?

image.png

什么是HTTP

image.png

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

协议分析

报文

Method

image.png

状态码

image.png

  • 200 0K- 客户端请求成功
  • 301- 资源 (网页等) 被永久转移到其它 URL
  • 302-临时跳转
  • 401 Unauthorized - 请求未经授权
  • 404- 请求资源不存在,可能是输入了错误的 URL500- 服务器内部发生了不可预期的错误504 Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应

RESTful API

RESTful API: 一种API设计风格, REST Representational State Transfer

1.每一个URI代表一种资源 2.客户端和服务器之间,传递这种资源的某种表现层 3.客户端通过HTTP method,对服务器端资源进行操作,实现"表现层状态转化"

image.png

常用的请求头

image.png

常用的响应头

image.png

缓存

image.png

image.png

cookie

image.png

发展

image.png

http2

概述:更快,更稳定,更简单

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

image.png

Http协议的应用场景分析

场景分析

静态资源

image.png

登录

image.png

跨越

image.png

  • CORS
  • Cross-Origin Resource Sharing
  • 预请求:获知服务端是否允许该跨源请求 (复杂请求)
  • 相关协议头:
    • Access-Control-Allow-OriginAccess-Control-Expose-Headers
    • Access-Control-Max-Age
    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Methods
    • Access-Control-Allow-Headers
    • Access-Control-Request-MethodAccess-Control-Request-Headers
    • Origin

跨越的解决方案

  • CORS
  • 代理服务器
  • lframe
    • 诸多不便

image.png

image.png

鉴权

image.png

sso(单点登录 Single Sign On)

image.png