深入理解HTTP

浏览器输入URL后HTTP请求返回的完整过程

网络协议基础知识

网络协议分层

经典五层模型

经典五层模型

  • 低三层：

    • 物理层主要作用是定义物理设备如何传输数据
    • 数据链路层在通信的实体间建立数据链路连接
    • 网络层为数据在结点之间传输创建逻辑链路

  • 传输层：

    • 向用户提供可靠的端到端（End-to-End）服务
    • 传输层向高层（即应用层）屏蔽了下层数据通信的细节

  • 应用层：

    • 为应用软件提供了很多服务
    • 构建于TCP协议之上
    • 屏蔽网络传输相关细节

HTTP协议的发展历史

HTTP/0.9

  • 只有一个命令GET
  • 没有HEADER等描述数据的信息
  • 服务器发送完毕，就关闭TCP连接（此处连接与HTTP不同，HTTP请求与TCP连接不是同一个概念， 在一个TCP连接发送很多个HTTP请求，HTTP请求存在于某一个TCP连接）

HTTP/1.0

  • 增加了很多命令（POST/PUT）
  • 增加status code 和 header
    • status code 是用来描述服务端处理某一个请求之后的状态
    • header 对应的请求的描述
  • 多字符集支持、多部分发送、权限、缓存等

HTTP/1.1

  • 持久连接
    • 在1.0版本中一个HTTP请求就要在客户端和服务端创建一个TCP连接，在服务端返还完内容后该TCP连接相对应关闭（成本相对较高、消耗、延迟）
  • pipeline
    • 可以在一个连接中发送多个请求，但是响应时按照先后顺序
  • 增加Host 和 其他一些命令
    • 在同一个物理服务器中或者同一个集群里面可以部署很多不同的web服务（提高使用效率）

HTTP/2.0

  • 所用数据以二进制进行传输
    • HTTP 1大部分数据传输是通过字符串，数据分片方式不同
  • 同一个连接里面发送多个请求不再需要按照顺序来返回处理，可同时返回多个（并行）
  • 头信息压缩以及推送等提高效率的功能
    • 服务端可以主动发起数据传输

HTTP 三次握手

HTTP请求的TCP连接基础

TCP三次握手

HTTP请求报文

HTTP客户端

CORS跨域限制以及预请求验证

CORS跨域允许方法、content-type(否则会进行预请求验证后才发送)

跨域允许方法

  • GET
  • header
  • POST

跨域允许Content-Type

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

其他限制

  • 请求头限制
    • 自定义请求头（不被允许但是可以通过设置Access-Control-Allow-*允许访问）
      Allow-Origin: 允许域
      Allow-Headers: 允许自定义Header
      Allow-Methods: 允许方法
      Max-Age: 最大允许访问时间（时间内不会再发送预请求）
    • 其他请求头限制(cors-safelisted-request-header)[https://fetch.spec.whatwg.org/]
  • XMLHttpRequestUpload 对象均没有注册任何时间监听器
  • 请求中没有使用ReadableStream对象

预请求

缓存头Cache-Control

可缓存性（哪里地方可缓存）

  • public
    • 均可缓存（包括中间Http代理服务器、发出请求客户端浏览器，http请求经过的地方）
  • private
    • 发出请求的客户端
  • no-cache
    • 可以缓存，但需要服务器验证

到期

  • max-age =

  • s-maxage =

    • 在代理服务器中会覆盖 max-age

  • max-stale =

    • 即便max-age已经过期，但是客户端在max-sale时间内便可使用max-age已过期的缓存，而不用重新去服务器端请求

重新验证

  • must-revalidate
  • proxy-revalidate
    • 缓存服务器重新验证

其他

  • no-store
    • 彻底不缓存
  • no-transform

资源验证

资源验证

验证头

  • Last-Modified
    • 上次修改时间
    • 配合If-Modified-Since或者If-Unmodified-Since 使用
    • 对比上次修改时间查看是否需要更新
  • Etag
    • 数据签名
    • 配合If-Match 或者 If-Non-Match使用
    • 对比资源签名判断是否使用缓存
  • 通过Set-Cookie设置到浏览器，下次再同域的请求中浏览器会自动携带
  • 键值对，可以设置多个

cookie属性

  • max-age 和 expires 设置过期时间
  • secure 只在https的时候发送
  • HttpOnly 无法通过document.cookie 访问（安全性）

HTTP长连接

数据协商

请求

  • Accept
    • Accept
    • Accept-Encoding: 数据压缩算法gzip, deflate
    • Accept-Language
    • User-Agent: 判断客户端浏览器环境、设备类型

      返回

  • Content
    • Content-Type
    • Content-Encoding
    • Content-Language

Redirect

  • 返回302，服务端Header设置, 临时跳转
    • Location
    • Host
  • 返回301，服务端Header设置, 永久跳转
    • 指定了新的地址后，再次访问时浏览器会直接将旧地址变成新的路径（浏览器尽量缓存链接301状态），不需要经过服务器指定新的Location

CSP(Content-Security-Policy)

  • 作用
    • 限制资源获取
    • 报告资源获取越权
  • 限制方式
    • default-src 限制全局
    • 限定资源类型