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

清疚 2023-10-10 18:53 36阅读 0赞

## 什么是HTTP协议？ ##

HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的 应用层协议

> **所谓超文本指的是传输的内容不仅是文本，还可以是其他资源比如图片，音频，视频等数据。HTTP 协议是目前最主流使用的一种应用层协议**

![3c9cf2f4116d4a31878cab6357f9c2c4.png][]

HTTP 往往是基于传输层的 TCP 协议实现的. (HTTP1.0, HTTP1.1, HTTP2.0 均为TCP, HTTP3 基于 UDP 实现) 目前我们主要使用的还是 HTTP1.1 和 HTTP2.0

当我们在浏览器中输入一个搜狗搜索的 "网址" (URL) 时，浏览器就给搜狗的服务器发送了一个 HTTP 请求，搜狗的服务器返回了一个 HTTP 响应.

这个响应结果被浏览器解析之后，就展示成我们看到的页面内容. (这个过程中浏览器可能会给服务器发送多个 HTTP 请求，服务器会对应返回多个响应，这些响应里就包含了页面 HTML，CSS，JavaScript，图片，字体等信息)

![837ebc0f453940928a7074b866071a07.png][]

## HTTP 协议格式 ##

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

### 抓包工具的使用 ###

这里我们使用[Fiddler][]

![5d26cbf3ab98447b872ab672a329683d.png][]

> **左侧窗口显示了所有的 HTTP请求/响应, 可以选中某个请求查看详情.** 
> 
> **右侧上方显示了 HTTP 请求的报文内容. (切换到 Raw 标签页可以看到详细的数据格式)** 
> 
> **右侧下方显示了 HTTP 响应的报文内容. (切换到 Raw 标签页可以看到详细的数据格式)** 
> 
> **请求和响应的详细数据, 可以通过右下角的 View in Notepad 通过记事本打开.**

> 可以使用 ctrl + a 全选左侧的抓包结果, delete 键清除所有被选中的结果

### 抓包工具的原理 ###

Fiddler 相当于一个 "代理"

浏览器访问 sogou.com 时，就会把 HTTP 请求先发给 Fiddler，Fiddler 再把请求转发给 sogou 的服务器. 当 sogou 服务器返回数据时，Fiddler 拿到返回数据，再把数据交给浏览器

因此 Fiddler 对于浏览器和 sogou 服务器之间交互的数据细节，都是非常清楚的.

![e03afb113d324c4cbd7e7b5f3b3ee52e.png][]

> 代理就可以简单理解为一个跑腿小弟. 你想买罐冰阔落，又不想自己下楼去超市，那么就可以把钱给 你的跑腿小弟，跑腿小弟来到超市把钱给超市老板，再把冰阔落拿回来交到你手上. 这个过程中，这 个跑腿小弟对于 "你" 和 "超市老板" 之间的交易细节，是非常清楚的

### 抓包结果 ###

以下是一个 HTTP请求/响应 的抓包结果

HTTP请求

![1f43adbfc0c549cbae55b5438033656e.png][]

> 首行: \[方法\] + \[url\] + \[版本\]
> 
> Header: 请求的属性, 冒号分割的键值对;每组属性之间使用\\n分隔;遇到空行表示Header部分结束
> 
> Body: 空行后面的内容都是Body. Body允许为空字符串. 如果Body存在, 则在Header中会有 一个Content-Length属性来标识Body的长度;

HTTP响应

![9315d4aefe2d4568afb5842a56f8897f.png][]

> 首行: \[版本号\] + \[状态码\] + \[状态码解释\]
> 
> Header: 请求的属性, 冒号分割的键值对;每组属性之间使用\\n分隔;遇到空行表示Header部分 结束
> 
> Body: 空行后面的内容都是Body. Body允许为空字符串. 如果Body存在, 则在Header中会有 一个Content-Length属性来标识Body的长度; 如果服务器返回了一个html页面, 那么html页 面内容就是在body中.

## 协议格式总结 ##

![6692be61444a43ca91a791b59e932b28.png][]

## HTTP 请求 (Request) ##

### 认识 URL ###

**URL 基本格式**

平时我们俗称的 "网址" 其实就是说的 URL (Uniform Resource Locator 统一资源定位符). 互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它

![5badad84afbb4b6da6d07274f759469f.png][]

> 一个具体的 URL:
> 
> [https://v.bitedu.vip/personInf/student?userId=10000&classId=100][https_v.bitedu.vip_personInf_student_userId_10000_classId_100]

> 1. https : 协议方案名. 常见的有 http 和 https，也有其他的类型. (例如访问 mysql 时用的 jdbc:mysql )
> 
> 2. user:pass : 登陆信息. 现在的网站进行身份认证一般不再通过 URL 进行了. 一般都会省略
> 
> 3. v.bitedu.vip : 服务器地址. 此处是一个 "域名", 域名会通过 DNS 系统解析成一个具体的 IP 地址. (通过 ping 命令可以看到, v.bitedu.vip 的真实 IP 地址为 118.24.113.28 )
> 
> 4. 端口号: 上面的 URL 中端口号被省略了. 当端口号省略的时候, 浏览器会根据协议类型自动决定使用 哪个端口. 例如 http 协议默认使用 80 端口, https 协议默认使用 443 端口
> 
> 5. /personInf/student : 带层次的文件路径
> 
> 6. userId=10000&classId=100 : 查询字符串(query string). 本质是一个键值对结构. 键值对之间使用 & 分隔. 键和值之间使用 = 分隔
> 
> 7. 片段标识: 此 URL 中省略了片段标识. 片段标识主要用于页面内跳转. (例如 Vue 官方文档: https://c n.vuejs.org/v2/guide/\#%E8%B5%B7%E6%AD%A5, 通过不同的片段标识跳转到文档的不同章节)

使用 ping 命令查看域名对应的 IP 地址.

1. 在开始菜单中输入 cmd , 打开 命令提示符

2. 在 cmd 中输入 ping v.bitedu.vip , 即可看到域名解析的结果

![c6cfa232dabe470fa6dbbe4a3d83ea72.png][]

**关于 query string**

> query string 中的内容是键值对结构. 其中的 key 和 value 的取值和个数, 完全都是程序猿自己约定的. 我们可以通过这样的方式来自定制传输我们需要的信息给服务器.

本章节就到这里啦，希望对大家有帮助！

[3c9cf2f4116d4a31878cab6357f9c2c4.png]: https://img-blog.csdnimg.cn/3c9cf2f4116d4a31878cab6357f9c2c4.png
[837ebc0f453940928a7074b866071a07.png]: https://img-blog.csdnimg.cn/837ebc0f453940928a7074b866071a07.png
[Fiddler]: http://xn--ghqu6tnb8117a//www.telerik.com/fiddler/
[5d26cbf3ab98447b872ab672a329683d.png]: https://img-blog.csdnimg.cn/5d26cbf3ab98447b872ab672a329683d.png
[e03afb113d324c4cbd7e7b5f3b3ee52e.png]: https://img-blog.csdnimg.cn/e03afb113d324c4cbd7e7b5f3b3ee52e.png
[1f43adbfc0c549cbae55b5438033656e.png]: https://img-blog.csdnimg.cn/1f43adbfc0c549cbae55b5438033656e.png
[9315d4aefe2d4568afb5842a56f8897f.png]: https://img-blog.csdnimg.cn/9315d4aefe2d4568afb5842a56f8897f.png
[6692be61444a43ca91a791b59e932b28.png]: https://img-blog.csdnimg.cn/6692be61444a43ca91a791b59e932b28.png
[5badad84afbb4b6da6d07274f759469f.png]: https://img-blog.csdnimg.cn/5badad84afbb4b6da6d07274f759469f.png
[https_v.bitedu.vip_personInf_student_userId_10000_classId_100]: https://v.bitedu.vip/personInf/student?userId=10000&classId=100
[c6cfa232dabe470fa6dbbe4a3d83ea72.png]: https://img-blog.csdnimg.cn/c6cfa232dabe470fa6dbbe4a3d83ea72.png