HTTP 协议的基本格式和 fiddler 的用法

观前提示:本篇博客演示使用的 IDEA 版本为2021.3.3版本,使用的是Java8(又名jdk1.8)

前端使用VSCode(Visual Studio Code1.78.2)

电脑使用的操作系统版本为 Windows 10

---

 HTTP 协议

1. HTTP 协议是什么

HTTP 的全称是 HyperText Transfer Protocol (超文本传输协议)的缩写，是一种建立在 TCP 上的无状态连接。HTTP 是互联网的基础协议，用于客户端与服务器之间的通信，它规定了客户端和服务器之间的通信格式，包括请求与响应的格式。

HTTP 属于是应用层最广泛使用的协议之一, HTTP 就是 浏览器 和 服务器之间的交互桥梁

HTTP 诞生与1991年. 目前已经发展为最主流使用的一种应用层协议.

主流版本依然还是 HTTP1.1, 因此本篇博客将主要介绍 HTTP1.1
 

 

HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP 实现)
 

 

 

当我们在浏览器中输入一个 百度搜索的 "网址" (URL) 时, 浏览器就给百度的服务器发送了一个 HTTP 请求, 百度的服务器返回了一个 HTTP 响应.
这个响应结果被浏览器解析之后, 就展示成我们看到的页面内容. (这个过程中浏览器可能会给服务器发送多个 HTTP 请求, 服务器会对应返回多个响应, 这些响应里就包含了页面 HTML, CSS, JavaScript, 图片, 字体等信息).

HTTP 协议格式

HTTP 是一个文本格式的协议. 可以通过 Chrome 开发者工具或者 Fiddler 抓包, 分析 HTTP 请求/响应的细节.

1. Fiddler 

学习 http 协议的交互过程,可以借助第三方工具来看到, 俗称 "抓包" 工具. 抓包工具有很多, 本篇博客使用 fiddler

1.1 下载安装

还是需要先找到正版的 fiddler 进行下载

 

我把官网放在这里:  fiddler 官网 

鼠标放到上方的 FIDDLER TOOLS 然后点击第二个 Fiddler Classic 因为她是经典版,不收费,第一个是要收费的

安装并不难,本篇博客就不进行描述了,遇到问题可以去搜安装方法

1.2 使用

 fiddler 本质上是一个代理程序, 使用的时候有两个注意事项

1. 可能和别的代理程序起冲突! ! ! 使用的时候需要关闭你的其他代理程序(包括一些浏览器插件)

2. 要想正确的抓包,还需要开启 https 功能, https 是基于 http 搞出来的进化版协议, 当下互联网绝大部分服务器都是 https 的, fiddler 默认不能抓 https 的包

需要手动启用 https 并且安装证书 

打开 fiddler, 点击Tools,选择 Options, 点击 https, 把下图的红框里面的东西全勾上

 

勾上这几个复选框, fiddler 才能抓包 https. 首次勾选的时候会弹出对话框, 问你是否安装相对应的证书, 选择 "是"

1.3 抓包结果

现在开始使用 fiddler 进行抓包,我选择的是抓包 必应

可以看到他弹出来可很多东西,第一次抓包看到这么多东西难免感到头大,虽然这些全是浏览器访问必应主页的时候,产生的 http 请求!但是不要急

先看最显眼的,这两个蓝色的数据, 他就是 html 页面,也是我们最关注的, 在请求搜过的首页页面, 其他的请求都是基于这个请求产生的 

(浏览器打开一个页面, 对应的 http 请求可能是一个,也可能是多个)

双击左侧请求列表中的选项, 查看到请求的详细情况

 

点击 Raw

 

http 请求具有一定格式, fiddler 会按照格式进行解析, 呈现出不同的显示效果, 此处看看最原始的效果

点击右下角的 View in Notepad 可以使用记事本打开

 观察抓包结果, 可以看到, 当前 http 请求, 其实是一个 行文本 格式的数据 (行文本格式便于用户观察)

我们再来看他的下面的数据

 

 红框里面的东西是响应数据,本来他也是文本,但是有的服务器会对响应进行压缩(变成二进制), 压缩是为了节省带宽

这黄色的框,就是翻译,他会自动翻译乱码

 点完就可以发现,二进制的东西没有了, 变成了行文本

2. 认识 URL

现在来看 http 里面的关键信息的含义

首行: 包含三个部分 . 之间使用 空格 进行区分

 

 这个就是 URL, 俗称网址

最他的最后面可以看到 http 的版本号 

 

2.1 URL 基本格式

 

URL 最关键的四个部分:

1. 域名/IP

2. 端口号

3. 带层次的路径

4. 查询字符串

 举个栗子就是: 点一份外卖, 要鱼香肉丝和米饭再点一瓶汽水, 骑手接单,拿到外卖然后往我这里送餐

康乐小区:1-19号/鱼香肉丝?米饭=要&汽水=要&餐具=要

IP地址: 端口号 / 带层次的路径  ?  查询字符串(以键值对的方式来组织)

一个 url 里面有几个部分,可以省略

省略了端口号的时候,浏览器会提供默认端口, 对于http 来说, 默认端口 80; 对于 https 来说,   默认端口是 443

/ 也是路径, 没省略只是有点短, 代表根目录. 是 http 服务器的根目录, http 服务器是系统上的一个进程, 就委托这个服务器系统上的特定的目录, 这个目录里的资源都可以让外面进行访问

/ 管理的根目录, 可以是系统上的任意一个目录(取决于 http 服务器具体的配置)

2.2 HTTP 请求和响应

一个 HTTP 服务器提供的资源有很多, 不同的路径, 拿到的资源也是不同的

下面以搜狗浏览器进行举例子

 

url 有些字符串是由特定含义的, 就需要对内容进行重新编码, 如果不编码, 直接写中文, 可能浏览器就无法正确识别了

 

这个 url 里面带有 query string

是以 ? 开头, 以键值对的方式组织, 键值对之间使用 & 分割. 键和值之间使用 = 分割 

HTTP 报文

HTTP有两种报文：请求报文和响应报文

一个HTTP请求报文由请求行（request line） 、请求头部（header）、空行和请求数据4个部分组成。

 

HTTP响应报文和请求报文的结构差不多，也是由四个部分组成：

 

1. 请求行

请求行由三部分组成：请求方法、请求URL（不包括域名 | 、HTTP协议版本

1.1 请求方法

协议名称://ip端口号/路径?查询字符串

 

方法描述了这次请求的语义, 实际开发中, 这里的方法,大部分都用不到, 最常见的就是 GET 和 POST

此处看到的 HTTP 的方法的语义, 是 HTTP 设计者的美好想法, 但残酷的现实却是语义仅供参考,一切以实际为主

GET 请求

1. 在浏览器地址栏直接输入 URL 

2. html 里的 link, script, img, a

3. 通过 js 来构造 get

以搜狐的网站抓包进行演示

 

POST 请求

典型的就是登录, 登录跳转到的时候会涉及到 POST, 另一个就是 上传文件

以 bilibili 的网站抓包进行演示

一个HTTP请求报文由请求行（request line） 、请求头部（header）、空行和请求数据4个部分组成。

 

 在抓包结果中可以看到. POST 的 body 是程序员自定义的内容

其中 uuid 是唯一身份标识

哔哩哔哩的 uuid 在他登录的下一个包里面

 570 抓到的是 username 和 password

571 抓到的是 uuid, 571 是get 不是 post

GET 和 POST 之间的区别

1. GET 可以给服务器传递信息, GET 传递的信息 一般是放在 query string, POST 传递消息则是通过 body

(这只是习惯用法,GET 也不是不能有 body, POST 也不是不能有 query string, 非常少见)

2. 语义上的差别, GET 请求一般是用于从服务器获取数据, POST 请求一般是给服务器提供数据

3. GET 通常会被设计成幂等(相同的输入,得到的结果是确定的)的, POST 不要求幂等

4. GET 可以被缓存, POST 则一般不能缓存(把请求的结果保存下来,下次请求可以直接读取结果) 

 

 2. 请求头部

还是使用 哔哩哔哩 登录页面进行抓包

可以看出下列部分就是 header, 这里是一堆键值对, 每一行是一个键值对, 使用 : 分割

这些键值对都是 http 提前定义好的,有特定含义

2.1 HOST 

大概描述了服务器所在的 地址 和 端口, HOST 这里的  地址 和 端口, 用来描述你最终要访问的目标

这个内容大概率和 URL 中一样, 也有一定的情况下是不同的

2.2 Content-Length 和 Content-Type

 

Content-Length: body 中的数据长度

 Content-Type: body 中的数据格式

如果是 GET 请求, 没有 body, 请求中没有这俩字段

如果是 POST 请求, 有  body, 则必须有这俩字段

2.3 User-Agent(UA)

 UA: 描述了浏览器和操作系统的版本

现在 UA 主要用来区分 PC 和 移动

2.4 Referer

 当前页面的来源, 如果直接通过地址栏输入地址, 直接点击收藏夹中的网址...都是没有 Referer 的

2.5 Cookie

非常重要的 请求头部 属性, 本质上是 浏览器 给网页提供的 本地存储数据的机制, 网页 默认是不允许访问你计算机的硬盘的(不安全)

cookie 就是浏览器对于访问硬盘做出了明确的限制, cookie 就是通过键值对的方式来组织数据的

注意: cookie 中具体存储什么内容, 也是程序员自定义的

这里的数据具体含义, 只有开发整个程序的代码的程序员才知道

 

 

 

Cookie 三大问题 

1. Cookie 是从那里来的?

Cookie 中的数据是来自于服务器, 服务器通过 HTTP 响应的报头部分(Set-Cookie 字段), 服务器来决定, 浏览器的 Cookie 来存什么

2. Cookie 是在那存的?

可以认为是存在于浏览器中, 存在于硬盘的. cookie 在存的时候, 是按照 浏览器 + 域名纬度 进行细分的

不同的浏览器, 各自存各自的 cookie, 同一个浏览器不同的域名, 对应不同的 cookie

cookie 里面不光是键值对, 同时还有过期时间

3. Cookie 要到那里去?

回到服务器这里去, 客户端同一时刻有很多, 客户端这边就会通过 Cookie 来保存当前用户使用中间状态, 当客户端访问浏览器的时候, 就会自动的把 Cookie 的内容带入到请求中去, 服务器就能够知道现在客户端是什么样子了.

3. HTTP 状态码

HTTP 状态码描述了这次响应的结果(成功?失败?原因?)

 

下面介绍几个常见的 HTTP 状态码

  随便输入一个正确的网址.通过抓包,可以看到 http 200, 说明 OK

 

随便输入一个错误的网址,就能抓包到404, 访问的资源不存在,没有在服务器上找到

 

403 Forbidden 访问被拒绝(没有权限) 典型例子: gitee码云的代码仓库不公开,拒绝访问,就是403

 302 重定向 

 

500 服务器内部错误 (服务器代码抛异常)

504 gateway timeout (响应时间太久) 

 

状态码主要分为:

1. 信息响应 (100–199)
2. 成功响应 (200–299)
3. 重定向消息 (300–399)
4. 客户端错误响应 (400–499)
5. 服务器错误响应 (500–599)

HTTP 自定义

HTTP 协议里面,程序员可以自定义的有以下这些

1. URL 的路径

2. URL 中的 query string

3. header 中的键值对

4. header 中的 cookie

5. body

HTTP 协议报文格式

 

---

本文完,感谢观看,不足之处请在评论区指出 !