Lesson 7 HTTP 实用指南 学习笔记 ｜ 青训营

1Wizzy
90 阅读8分钟

Lesson 7 HTTP 实用指南

VideoLink:

  1. 初识 HTTP 协议 - 掘金

  2. HTTP 协议的应用场景分析 - 掘金

  3. HTTP 协议实战分析 - 掘金

CoursewareLink: HTTP实用指南.pptx

初识 HTTP

  • Hyper Text Transfer Protocol 超文本传输协议
  • 应用层协议，基于 TCP 协议
  • 请求响应
  • 简单可扩展：对于C/S，可以添加双方约定的Key-Value
  • 无状态：没有记忆能力，每个请求都是独立的

协议分析

HTTP 协议的发展

HTTP 协议报文

以 HTTP/1.1 为例

Method

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

Safe (安全的) : 不会修改服务器的数据的方法。

  • GET HEAD OPTIONS

ldempotent （幂等）:同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的。

  • 所有 safe 的方法都是 Idempotent 的
  • GET HEAD OPTIONS PUT DELETE

状态码

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

RESTful API

一种API设计风格。REST - Representational State Transfer

  • 每一个URI代表一种资源:
  • 客户端和服务器之间，传递这种资源的某种表现层
  • 客户端通过HTTP method，对服务器端资源进行操作，实现“表现层状态转化”
请求返回码含义
GET /zoos200 OK列出所有动物园，服务器成功返回了
POST /zoos201 CREATED新建一个动物园，服务器创建成功更新某个指定动物园的信息 (提供该动
PUT /zoos/ID400 INVALID REQUEST更新某个指定动物园的信息 (提供该动物园的全部信息)用户发出的请求有错误，服务器没有进行新建或修改数据的操作
DELETE /zoos/ID204 NO CONTENT删除某个动物园，删除数据成功

常用请求头

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

常用响应头

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 --Response

Name=Value各种 Cookie 的名称和值
Expires=DateCookie 的有效期，缺省时Cookie 仅在浏览器关闭之前有效。
Path=Path限制指定Cookie 的发送范围的文件目录，默认为当前
Domain=Domain限制cookie生效的域名，默认为创建cookie的服务域名
secure仅在HTTPS 安全连接时，才可以发送Cookie
HttpOnlyJavaScript 脚本无法获得Cookie
SameSite=[NoneStrictLax]- None 同站、跨站请求都可发送
  • Strict 仅在同站发送
  • 允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送 |

HTTP/2 概述

  • 更快，更稳定，更简单
  • 帧 (frame) : HTTP/2 通信的最小单位每个帧都包含帧头，至少也会标识出当前帧所属的数据流。

  • 消息：与逻辑请求或响应消息对应的完整的一系列帧。
  • 数据流：已建立的连接内的双向字节流可以承载一条或多条消息。

交错发送，接收方重组织

  • HTTP/2 连接都是永久的，而且仅需要每个来源一个连接

  • 流控制：阻止发送方向接收方发送大量数据的机制

  • 服务器推送：在客户端请求时，附带推送给客户端一些文件（应用较少）

HTTPS 概述

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

场景分析

静态资源

状态码200不一定是发送了请求，如图是从磁盘缓存

可以得到一些信息

  • 强缓存
  • Cache-Control：1Year
  • 运行所有域名访问
  • 资源类型：CSS

静态资源方案：缓存 + CDN + 文件名Hash

  • CDN：Content Delivery Network
  • 通过用户就近性和服务器负载的判断，CDN 确保内容以一种极为高效的方式为用户的请求提供服务

登录

域Origin

跨域

  • CORS（Cross-Origin Resource Sharing）

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

  • 相关协议头

    • Access-Control-Allow-Origin
    • Access-Control-Expose-Headers
    • Access-Control-Max-Age
    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Methods
    • Access-Control-Allow-Headers
    • Access-Control-Request-Method
    • Access-Control-Request-Headers
    • Origin

Preflight request：向服务器发送Option请求这种请求是否可以跨到某域

Main request：发送真正的请求

  • 跨域解决方案

    • CORS
    • 代理服务器：同源策略是浏览器的安全策略，不是 HTTP 的
    • Iframe：诸多不便

  • 鉴权

    • Session + Cookie
    • JWT（JSON Web Token）

适合使用jwt的场景： 1. 有效期短 2. 只希望被使用一次 比如，用户注册后发一封邮件让其激活账户，通常邮件中需要有一个链接，这个链接需要具备以下的特性：能够标识用户，该链接具有时效性（通常只允许几小时之内激活），不能被篡改以激活其他可能的账户，一次性的。这种场景就适合使用jwt。 而由于jwt具有一次性的特性。单点登录和会话管理非常不适合用jwt，如果在服务端部署额外的逻辑存储jwt的状态，那还不如使用session。基于session有很多成熟的框架可以开箱即用，但是用jwt还要自己实现逻辑。

  • SSO：单点登录（Single Sign On）

实战

浏览器端

AJAX 之 XHR

  • XHR：XMLHttpRequest
  • readyState
0UNSENT代理被创建，但尚未调用open() 方法。
1OPENEDopen() 方法已经被调用。
2HEADERS RECEIVEDsend() 方法已经被调用并且头部和状态已经可获得
3LOADING下载中; responseText 属性已经包含部分数据
4DONE下载操作已完成。

AJAX 之 Fetch

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

Node 端

标准库HTTP/HTTPS

  • 默认模块，无需安装其他依赖
  • 功能有限/不是十分友好

常用请求库：axios

  • 支持浏览器、nodejs环境

  • 丰富的拦截器

用户体验——网络优化

  • 预解析、预连接

  • 重试是保证稳定性的有效手段，但要防止加剧恶劣情况
  • 缓存合理使用，作为最后一道防线

了解更多

WebSocket

  • 浏览器与服务器进行全双工通讯的网络技术

  • 典型场景：实时性要求高，例如聊天室

  • URL 使用 ws:// 或 wss:// 开头

QUIC

  • Quick UDP Internet Connection
  • 0-RTT 建联（首次建联除外）
  • 类似 TCP 的可靠传输
  • 类似 TLS 的加密传输。支持完美前向安全
  • 用户空间的拥塞控制，最新的BBR算法
  • 支持 h2 的基于流的多路复用，但没有 TCP 的 HOL 问题
  • 前向纠错 FEC
  • 类似 MPTCP 的 Connection Migration

avatar
文章
阅读
粉丝