HTTP使用指南 | 青训营笔记

17 阅读8分钟

这是我参与「第五届青训营」伴学笔记创作活动的第5天,今天学习的内容是HTTP协议。

01.初识HTTP

什么是HTTP,以及其基本特点

首先来看一下我们平时在网络上进行常规网址访问或搜索关键词输入后浏览器进行的一系列行为。

  • 用户输入字符串后,浏览器识别用户意向是进入网址还是进行搜索,处理之后得到一个请求地址,由浏览器内核向服务器发起请求,服务器根据请求内容返回结果,浏览器再读取响应,将这些内容在页面上渲染出来呈现给用户。接下来我们只关注与请求响应内容相关的HTTP协议,它属于计算机网络的应用层。

什么是HTTP

  • HyperText Transfer Protocol 超文本传输协议
  • 应用层协议,基于TCP协议
  • 包括请求响应两部分
  • 简单可扩展,可以自定义header,只需host与client互相理解信息的含义
  • 无状态协议,不会记录过去携带的信息

以下是HTTP发展的简要概括

2.png

02.协议分析

学习报文结构,发展历程

报文

以HTTP1.1版本协议为例子

3.png

  • HTTP报文是简单的格式化数据块,每条报文都包含一条来自客户端的请求,或者一条来自服务器的响应

  • 它们由三个部分组成:对报文进行描述的起始行(start line)、包含属性的首部块(header)、以及可选的、包含数据的主体部分(body)

  • 请求的起始行POST / HTTP/1.1分别是这条请求的方法、路径和协议版本;响应的起始行HTTP/1.1 403 Forbidden 分别表示响应的协议版本、状态码和状态信息

接下来介绍报文中包含的常见信息:

方法 Method

方法名用途
GET请求一个指定资源的表示形式,使用GET的请求应该只被用于获取数据.
POST用于将实体提交到指定的资源,通常导致在服务器上的状态变化或副作用
PUT用请求有效载荷替换目标资源的所有当前表示
DELETE删除指定的资源
HEAD请求一个与GET请求的响应相同的响应,但没有响应体
CONNECT建立一个到由目标资源标识的服务器的隧道。
OPTIONS用于描述目标资源的通信选项。
TRACE沿着到目标资源的路径执行一个消息环回测试。
PATCH用于对资源应用部分修改。

一些方法的特性:

  • Safe(安全的)︰不会修改服务器的数据的方法 eg: GET HEAD OPTIONS
  • ldempotent(幂等)︰同样的请求被执行一次与连续执行多次的效果是一样的,服务器的状态也是一样的 所有safe的方法都是ldempotent的
    eg: GET HEAD OPTIONS PUT DELETE

状态码 Status Code

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

需要注意不要将RESRful API与状态码混淆

RESTful API :一种API设计风格; REST - Representational State Transfer 表现层转化

(1)每一个URI代表一种资源;

(2)客户端和服务器之间,传递这种资源的某种表现层;

(3)客户端通过HTTP method,对服务器端资源进行操作,实现"表现层状态转化"。 | 请求 | 返回码 | 含义 | | --- | -------- | --- | |GET /zoos| 200 OK | 列出所有动物园,服务器成功返回了 | |POST /zoos| 201 CREATED| 新建一个动物园,服务器创建成功| |PUT /zoos/ID| 400 INVALID REQUEST | 更新某个指定动物园的信息(提供该动物园的全部信息);用户发出的请求有错误,服务器没有进行新建或修改数据的操作| |DELETE /zoos/ID| 204 NO CONTENT |删除某个动物园,删除数据成功 |

常用请求头

属性含义
Accept接收类型,表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
Content-Type客户端发送出去实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制,如no-cache
If-Modified-Since对应服务端的Last-Modified,用来匹配看文件是否变动,只能精确到1s之内
Expires缓存控制,在这个时间内不会请求,直接使用缓存,服务端时间
Max-age代表资源在本地缓存多少秒,有效时间内不会请求,而是使用缓存
lf-None-Match对应服务端的ETag,用来匹配文件内容是否改变(非常精确)
Cookie有cookie并且同域访问时会自动带上
Referer该页面的来源URL(适用于所有类型的请求,会精确到详细页面地址, csrf拦截常用到这个字段)
Origin最初的请求是从哪里发起的(只会精确到端口),Origin比Referer更尊重隐私
User-Agent用户客户端的一些必要信息,如UA头部等

Cahche-Control、If-Modified-Since、Expires、Max-age这四个属性都与缓存有关

常用响应头

属性含义
Content-Type服务端返回的实体内容的类型
Cache-Control指定请求和响应遵循的缓存机制,如no-cache
Last-Modified请求资源的最后修改时间
Expires应该在什么时候认为文档已经过期,从而不再缓存它
Max-age客户端的本地资源应该缓存多少秒,开启了Cache-Control后有效
ETag资源的特定版本的标识符,Etags类似于指纹
Set-Cookie设置和页面关联的cookie,服务器通过这个头部把cookie传给客户端
Server服务器的一些相关信息
Access-Control-Allow-Origin服务器端允许的请求Origin头部(譬如为*)

缓存

  • 强缓存

    • Expires,时间戳
    • Cache-Control
      • 可缓存性
        • no-cache :协商缓存验证.
        • no-store :不使用任何缓存·
      • 到期
        • max-age ∶单位是秒,存储的最大周期,相对于请求的时间
      • 重新验证*重新加载
        • must-revalidate : 一旦资源过期,在成功向原始服务器验证之前,不能使用
  • 协商缓存

    • Etag / If-None-Match: 资源的特定版本的标识符,类似于指纹
    • Last-Modified / If-Modified-Since: 最后修改时间

Cookie

响应中的Set-Cookie属性

image.png

发展

HTTP/2

更快、更稳定、更简单

1版本传输的是完整文本,2版本划分成了若干个帧,以二进制编码形式传输,效率会更高。

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

image.png

HTTPS

  • HTTPs:HyperText Transfer Protocol Secure
  • 经过TSL/SSL加密

对称加密︰加密和解密都是使用同一个密钥

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

  • HTTPS是对称加密和非对称加密混用的

03.常见场景

静态资源

不是所有响应都来自实时请求,可能来自磁盘\内存的缓存

image.png

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

image.png

  • 为了保证用户打开页面的效率,已打开过可以通过本地缓存很快的显示,如果是第一次打开通过CDN的策略就近获取资源。
  • 文件名hash的改变保证了用户每次刷新获得最新的资源。

登录场景

Untitled.png

使用options请求的原因:cross-origin 跨域

同域和跨域的概念

image.png

  • scheme、host name、port任意一个不一样就认为是跨域

  • https默认端口号是443;http默认端口号是80

且大部分的实际场景都是跨域请求,所以我们需要了解跨域的解决方案

  • CORS(Cross-Origin Resource Sharing)
    • 预请求:获知服务端是否允许该跨源请求(复杂请求) -
  • 代理服务器
    • 注册一个放在同域的代理服务器,帮助我们转发响应
    • 同源策略是浏览器的安全策略,不是HTTP的
  • Iframe 有诸多不便