HTTP 使用指南

0x1 初识 HTTP 协议

网页加载流程

graph LR
A(user 输入网址)==>B(browser 进程)
B==>C(处理输入信息)
B-->D(页面加载完成)
C==>E(浏览器内核)
E==>F(发起请求)
F==>I(Internet)
I==>J(服务器)
J==>I
E-->G(读取响应)
E-->H(渲染)
F-->G
I==>G
G==>H
H==>D

HTTP 位于 OSI 模型和 TCP/IP 的应用层(Application)

什么是 HTTP

超文本传输协议：Hyper Text Transfer Protocol
作为应用层协议，基于传输层的 TCP

分为请求和响应两种模式

请求

POST /index.php HTTP/1.1

HOST: www.example.com

Content-Type: application/json

Content-Length: 15

{"msg": "hello,world"}

响应

HTTP/1.1 200 OK

Data: Sun, 1, Jan 2022 00:00:00

server: Tengine

content-type: text/html; charset=utf-8

<!doctype html><html><...

具有简单可扩展的特点
是一种无状态的协议：每个请求孤立

0x2 协议分析

发展历程

graph LR
A(HTTP/0.9 单行协议)-->B(HTTP/1.0 构建可扩展性)
B-->C(HTTP/1.1 标准化协议)
C-->D(HTTP/2 更优异的表现)
D-->E(HTTP/3 草案)

报文分析

请求 Requests

POST /index.php HTTP/1.1

HOST: www.example.com

Content-Type: application/json

Content-Length: 15

{"msg": "hello,world"}

响应 Responses

HTTP/1.1 200 OK

Data: Sun, 1, Jan 2022 00:00:00

server: Tengine

content-type: text/html; charset=utf-8

<!doctype html><html><...

HTTP/1.1 报文结构：

graph LR
A(start-line)-->B(HTTP headers)
A-->E(请求: Method Path Version)
A-->F(响应: Version StatusCode StatusMessage)
B-->C(empty line)
C-->D(body)

Method：请求方法

Method	描述	特点
GET	请求一个指定资源的表示形式	Safe、Idempotent
POST	用于将实体提交到指定的资源
PUT	用请求有效载荷替换目标资源的所有当前表示	Idempotent
DELETE	删除指定的资源	Idempotent
HEAD	请求一个与 GET 请求的响应相同的响应，但没有响应体	Safe、Idempotent
CONNECT	建立一个到由目标资源标识的服务器的隧道
OPTIONS	用于描述目标资源的通信选项	Safe、Idempotent
TRACE	沿着到目标资源的路径执行一个消息环回测试
PATCH	用于对资源应用部分的修改

Safe：安全，不会修改服务器的数据的方法
Idempotent：幂等，同样的请求被执行一次与连续多次的效果相同、服务器状态相同

Path：请求资源路径
Version：使用的 HTTP 版本
StatusCode：状态码
- 1xx：已接收，正在处理
- 2xx：成功（200：请求成功）
- 3xx：重定向，完成请求需要进一步操作（302：临时跳转）
- 4xx：客户端错误（404：资源不存在）
- 5xx：服务器端错误（504：网关超时）
- 详解
StatusMessage：状态信息
RESTful API：一种 API 设计风格（Representational State Transfer）
- 每个 URI 代表一种资源
- 客户端与服务器之间传递这种专业的某种表现层
- 客户端通过 Method 对服务器端资源进行操作，实现表现层状态转化

常用请求头

请求头	描述
Accept	接收类型，表示浏览器支持的 MIME 类型
Content-Type	客户端发送出去实体内容的类型
Cache-Control	指定请求和响应遵循的缓存机制
If-Modified-Since	对应服务端的 Last-Modified，用来匹配看文件是否变动
Expires	缓存，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age	代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
If-None-Match	对应服务端的 ETag，用来匹配文件内容是否改变
Cookie	有 cookie 并且同域访问时会自动带上
Referer	该页面的来源 URL
Origin	最初的请求发起的源头（端口）
User-Agent	用户客户端的一些必要信息

常用响应头

响应头	描述
Content-Type	服务端返回的实体内容的类型
Cache-Control	指定请求和响应遵循的缓存机制
Last-Modified	请求资源的最后修改时间
Expires	应该在什么时候认为文档已经过期
Max-age	客户端的本地资源应该缓存时间（开启 Cache-Control 后有效）
ETag	资源的特定版本的标识符
Set-Cookie	设置和页面关联的 Cookie，服务器通过这个头部把 Cookie 传给客户端
Server	服务器的一些相关信息
Access-Control-Allow-Origin	服务器端允许的请求 Origin 头部

缓存：强缓存、协商缓存

graph LR
A(开始)-->B(浏览器)
B-->C(发起 GET 请求)
D(读取浏览器缓存)--将缓存返回浏览器-->C
C-->E{是否有缓存}
E--是-->F{强缓存是否新鲜}
F--是-->D
F--否-->G(上一次响应头是否有 ETag)
G--是-->H(发起请求, 请求头带 If-None-Match)
G--否-->I{上一次响应头是否有 Last-Modified}
I-->J(发起请求, 请求头带 If-Modified-Since)
H-->K{状态是否为 304}
J-->K
K--304-->D
K--200-->L(请求响应完成)
L-->M(协商缓存)

Set-Cookie-response	描述
Name=value	各种 cookie 的名称和值
Expires=Date	有效期，缺省时仅在浏览器关闭前有效
Path=Path	限制指定 cookie 的发送范围的文件目录
Domain=domain	限制 cookie 生效的域名
secure	进制 HTTP 安全连接时才发送 cookie
HttpOnly	JS 脚本无法获得 cookie
SameSite=[None\|Strict\|Lax]	None：同站、跨站都可以发送 Strict：仅在同站发送 Lax：允许与顶级导航一起发送

HTTP/2 概述
1. 帧（frame）：HTTP/2 通信的最小单位，每个帧都包含帧头，至少也会标识出当前帧所属的数据流
2. 消息：与逻辑去或响应信息对应的完整的一系列帧
3. 数据流：已建立的连接内的双向字节流，可以承载一条或多条信息
4. 流控制：阻止发送方向接收方发送大量数据的机制
HTTPS 概述
1. Hyper Text Transfer Protocol Secure
2. 通过 TSL/SSL 加密
  1. 对称加密：密钥相同
  2. 非对称加密：分公钥和私钥

0x3 场景分析

静态资源
1. 静态资源方案：缓存 + CDN + 文件名Hash
  - CDN：Content Delivery Network
  - 通过用户就近性和服务器负载的判断，CDN 确保内容以一种极为高效的方式为用户的请求提供服务
登录
1. 业务场景：表单填写/扫码
2. 技术方式：SSO（单点登录：Single Sign On）
3. 当出现跨域时，会出现 OPTIONS 请求
  - 域名构成：[Scheme]://[HostName]:[port]
4. 操作流程
  1. 向目标域名的目标 path 使用 POST 方法发送请求
  2. 携带信息：
    - 发送的数据格式为 form（表单）
    - 希望获取的数据格式为 json
    - 已有的 cookie
  3. 返回信息
    - 数据格式为 json
    - 各种 cookie 的信息
  4. 鉴权
    - Session + cookie
    - JSON Web Token
跨域
1. 跨域解决方案
  1. CORS：Cross-Origin Resource Sharing
  2. 代理服务器
  3. Iframe（不推荐）

0x4 实战分析

浏览器

Ajax 的 XHR

XHR：XML Http Request

ready	说明
UNSENT	代理被创建，但尚未调用`open()`方法
OPENED	`open()`方法已被调用
HEADERS_RECEIVED	`send()`方法已被调用，并且头部和状态已经可获得
LOADING	下载中
DONE	下载操作已完成

Ajax 的 Fetch

XHR 升级版
使用 Promise
模块化设计响应、请求和头部对象
通过数据流处理对象，支持分块读取

postData('http://example.com/answer', { answer: 42 })

    .then(data => console.log(data))

    .catch(err => console.log(err))

function postData(url, data) {

    return fetch(url, {

        body: JSON.stringify(data),

        cache: 'no-cache',

        credentials: 'same-origin',

        headers: {

            'user-agent': 'Mozila/4.0 MDN Example',

            'content-type': 'application/json'

        },

        method: 'POST',

        mode: 'cors',

        redirect: 'follow',

        referrer: 'no-referrer'

    }).then(res => res.json())

}

NodeJS

标准库 HTTP/HTTPS
1. 默认模块，功能有限

常用请求库 axios

// 全局配置

axios.defaults.baseURL = "http://api.example.com";

// 添加请求拦截器

axios.interceptors.request.use(function(cfg) {

    // 在发送请求前的操作

    return cfg;

}, function(err) {

    // 对错误请求的操作

    return Promise.reject(err);

});

// 发送请求

axios({

    method: 'get',

    url: 'http://test.com',

    responseType: 'stream'

}).then(function(res) {

    res.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))

});

用户体验
1. 网络优化
  
  graph TB
  A(网络优化)-->B(HTTP/2)
  B-->B1(优势)
  B1-->B11(Binary Format)
  B1-->B12(Multiplexed)
  B1-->B13(Server Push)
  B1-->B14(Header Optimize)
  B-->B2(兼容性)
  B-->B3(简单实践)
  B-->B4(HTTP/3)
  A-->C(CDN 动态加速)
  C-->C1(适用场景)
  C-->C2(缓存)
  C2-->C21(回源策略)
  C2-->C22(缓存刷新)
  C2-->C23(缓存预热)
  C2-->C24(缓存击穿)
  C-->C3(实践)
  A-->D(DNS 预解析)
  A-->E(网络预连接)
  A-->F(域名)
  F-->F1(域名收敛)
  F-->F2(域名发散)
  A-->G(压缩)
  G-->G1(gzip)
  G-->G2(brotil)
  A-->H(HTTPS 性能优化)
2. 稳定性
  
  graph TB
  A(稳定性)-->B(重试机制)
  B-->B1(超时)
  B-->B2(错误)
  A-->C(缓存)
  A-->D(数据安全)
  D-->D1(HTTPS)
  D-->D2(劫持)

0x5 扩展

通信方式-WebSocket
- 浏览器与服务器进行全双工通讯的网络技术
- 适用于对实时性要求较高的场景
- URL 使用ws://或wss://等开头
QUIC
- Quick UDP Internet Connection

首发于HTTP 使用指南 | 青训营笔记

-End-

HTTP 使用指南的更多相关文章

JavaScript权威指南 - 函数
函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...
UE4新手之编程指南
虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...
JavaScript权威指南 - 对象
JavaScript对象可以看作是属性的无序集合,每个属性就是一个键值对,可增可删. JavaScript中的所有事物都是对象:字符串.数字.数组.日期,等等. JavaScript对象除了可以保持自 ...
JavaScript权威指南 - 数组
JavaScript数组是一种特殊类型的对象. JavaScript数组元素可以为任意类型,最大容纳232-1个元素. JavaScript数组是动态的,有新元素添加时,自动更新length属性. J ...
const extern static 终极指南
const extern static 终极指南不管是从事哪种语言的开发工作,const extern static 这三个关键字的用法和原理都是我们必须明白的.本文将对此做出非常详细的讲解. co ...
Atitit.研发管理软件公司的软资产列表指南
Atitit.研发管理软件公司的软资产列表指南 1. Isv模型下的软资产1 2. 实现层面implet1 3. 规范spec层1 4. 法则定律等val层的总结2 1. Isv模型下的软资产 Sof ...
HA 高可用软件系统保养指南
又过了一年 618,六月是公司一年一度的大促月,一般提前一个月各系统就会减少需求和功能的开发,转而更多去关注系统可用性.稳定性和管控性等方面的非功能需求.大促前的准备工作一般叫作「备战」,可以把线上运 ...
第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南
欢迎查看第六代智能英特尔® 酷睿™ 处理器图形 API 开发人员指南,该处理器可为开发人员和最终用户提供领先的 CPU 和图形性能增强.各种新特性和功能以及显著提高的性能. 本指南旨在帮助软件开发人员 ...
Visual Studio Code 配置指南
Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器.在我看来它是「一款完美的编辑器」. 本文是有关 VS Code 的特性介绍与配置指 ...
Web API 入门指南 - 闲话安全
Web API入门指南有些朋友回复问了些安全方面的问题,安全方面可以写的东西实在太多了,这里尽量围绕着Web API的安全性来展开,介绍一些安全的基本概念,常见安全隐患.相关的防御技巧以及Web AP ...

随机推荐

关于无法查看hadoop的防火墙状态解决方法
可以参考这两位博主写的 https://www.055401.com/computer/376.html https://blog.csdn.net/weixin_52596632/article/d ...
AntSK：打造你的本地AI知识库——离线运行详细教程
亲爱的读者朋友们,今天我要给大家介绍一个强大的开源工具--AntSK.这个工具能让您在没有Internet连接时依然能使用人工智能知识库对话和查询,想象一下,即使在无网络的环境中,您也能与AI进行愉快 ...
内部UI自动化测试培训之python基础
这个文档的由来是公司内部UI自动化测试培训的资料.部门为了减少测试工作量,准备做UI自动化测试.我写python,其他同事都是java,所以python基础和UI自动化测试selenium的培训就由我 ...
分布式理论 & RPC & Dubbo
分布式服务框架(RPC) 用于提高机器利用率的资源调度和治理中心*(SOA)[ Service Oriented Architecture] Dubbo(RPC框架) 服务提供者**(Provider ...
代码片段管理软件 - 发现 utools 这个工具还行 windows软件
代码片段管理软件 - 发现 utools 这个工具还行 windows软件介绍这个软件不是专业的代码片段工具好在还能凑合用最完美的还是苹果那个软件,但是用的win没办法了这个可以粘贴到vsc ...
用json画图的画图软件推荐 Balsamiq
看这个库的时候发现的的这个软件 https://github.com/ironman1987/chinese-developer-roadmap 下载:https://www.zdfans.com/h ...
DatePicker 日期选择器 split-panels 数组的时候，清空这个费劲啊，最后走的后门
这里的核心问题就是验证的时候value值不对,总是初始化的值,不论怎么设置,开始觉得是数组指针的问题,最后也不行,null也不行,组件的props都已经是null了,验证就是这么神奇,最后把this放 ...
Kotlin 语法糖(对象不为空返回自身,为空返回其他)
原文地址: Kotlin 语法糖(对象不为空返回自身,为空返回其他) - Stars-One的杂货小窝开发中,经常会有这样逻辑: 判断对象如果不为空,则取对象本身; 为空,则得到其他对象; 然后每次 ...
JS（数组）
一数组的概念问:之前学习的数据类型,只能存储一个值.如果我们想存储班级中所有学生的姓名,那么该如何存储呢?答:可以使用数组(Array).数组可以把一组相关的数据一起存放,并提供方便的访问(获取) ...
记录--手写$forceUpdate,vm.$destroy方法
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 vm.$forceUpdate (1)作用迫使Vue.js实例重新渲染.注意它仅仅影响实例本身以及插入插槽内容的子组件,而不是所有子组件 ...