HTTP（一）：Fiddler下载、抓包请求响应解析
前言
hello hello💕，这里是洋不写bug~😄，欢迎大家点赞👍👍，关注😍😍，收藏🌹🌹
在进行数据通信时，程序员接触到的就是应用层，通常会基于现成的应用层协议来进行数据通信，在互联网开发领域，HTTP是最常用到的协议（准确来说现在大部分使用的是HTTPS协议，也就是HTTP + TLS 加密，本质还是 HTTP，只是传输内容被加密）
学习HTTP协议，就需要使用抓包工具，来捕获计算机上的HTTP交互，补货后就能看到这次交互请求和响应的数据，进而进行分析，这篇博客会解析如何使用抓包工具Fiddler来捕获交互，看请求和响应的内容🎆个人主页：洋不写bug的博客
🎆所属专栏：JavaEE学习
🎆铁汁们对于JavaEE的各种常用核心语法，都可以在上面的JavaEE专栏学习，专栏正在持续更新中🏀，有问题可以写在评论区或者私信我哦~
1，HTTP简介
无论是在网站，还是手机app中，HTTP的使用频率都是很高的，HTTP 全称
（HyperText Transfer Protocol）全称为超文本传输协议，超文本就表示文本中包含了更加复杂的内容，比如图片、音频、视频、特殊文字、链接…
HTTP发展图如下，虽然现在已经发展到了HTTP3.0，但是但 HTTP/1.1 依然在大量使用（因为最新版本可能有一些Bug，早期版本相对来说就会比较稳定），在博客中解析HTTP主要就是基于1.1版本
HTTP 2及其之前的版本，在传输层是基于TCP的，到了HTTP 3就基于UDP了，因为TCP的传输效率是较低的，HTTP 3用UDP，传输校验是在应用层上来完成的
HTTP协议是一个非常经典的“一问一答”模型（客户端发送一个请求，服务器回复响应），其他情况（如下所示）就要切换其他协议：
- 多问一答（上传文件，分成多份上传，上传完成后服务器回复一个响应）
- 一问多答（下载大文件，分成多份下载）
- 多问多答（远程桌面控制时，键盘、鼠标的动作就会被发送给服务器，对端的各种界面的变化也会通过服务器发送回来）就要换其他的协议
2，抓包软件Fiddler
抓包软件本质上是一个代理程序，观察HTTP的协议格式就要通过抓包软件
例如有一天博主想要吃辣条，刚好室友要下楼，就给室友发钱，让室友去楼下超市帮忙买，这里博主就可以看作是客户端，室友就可以看作是代理程序，超市老板就可以看作是服务器
- 正常是博主把钱交给老板，老板把辣条给我
- 现在变成，博主把钱交给室友，室友把钱交给超市老板，老板把辣条给室友，室友再把辣条给我
这种情况下代理是替客户端干活的，就称为正向代理
还有种情况代理是替服务器干活的，称为反向代理
例如超市老板安排他儿子看店，他儿子收到钱后把钱给老板，老板把辣条给他儿子，儿子再把辣条给客人，这时候就是反向代理
本来是客户端通过网卡，把数据发送给目标服务器，有了抓包软件后，客户端就先把数据发送给抓包软件，抓包软件再通过网卡把数据发送给服务器
服务器返回数据也是类似的道理，也是先到达抓包软件，再到达客户端
有一个专门针对HTTP协议的抓包软件，Fiddler，铁汁们可以下载使用下（点击下面链接可以直接下载官方安装包）
下载链接
下载后在win中搜索下，打开这个程序
打开程序后先设置下，点击左上角的Tools，再点击Options
进入后点击HTTPS，勾选前三个对号即可，接着点击OK
这个程序的页面的左侧就是HTTP请求/响应列表，先点击一个交互，按 ctrl + A键，在点击delete，清空列表，后续比如说点击B站的一个视频链接，想在列表中观察交互，在点击链接前就先清空列表，这样能更容易的找到交互
但是清空后，就算当前计算机什么的不干，也会捕捉到很多的请求和响应，这是因为Windows 系统、后台软件、服务，也会偷偷在后台联网，这些网络请求就会被 Fiddler 抓到
3，Fiddler使用
这里博主先提前打开网页版本豆包，接着清空Fiddler的列表，再刷新下豆包网页（点击刷新按钮），再看下Fiddler中显示的列表
下面蓝色的部分就表示这次响应是HTML内容
选中这个蓝色部分，界面右侧部分上边就是HTTP的请求相关信息、下方就是HTTP的响应相关信息
直接看这个字比较小，可以点击右下角的View in Notepad，在记事本中查看
构成网页需要三个关键部分：
- HTML：定义页面结构（骨架）
- CSS：定义页面样式（装修，包括但不限于颜色、字体、对齐方式、边框、位置......）
- JavaScript：定义交互逻辑（例如点击某个地方，能够跳转；按下某个按键，具有某种效果）
对于前端的学习也是按照这个顺序，先学习HTML，能够写出网页的基本框架；再学习CSS，让网页的样式更加美观；最后学习JavaScript，实现更多的交互功能。
在浏览器和服务器之间，就会存在多次HTTP交互，有的交互获取HTML、有的交互获取CSS、有的交互获取JavaScript、有的交互获取一些依赖的资源（图片、视频、音频、字体…）
获取HTML的响应相关信息在Fiddler列表中时红色，获取CSS的响应相关信息在Fiddler列表中是红色，获取JavaScript相关信息在Fiddler在列表中是绿色
但是刚刚刷新豆包网页，在列表中看到www.doubao.com只有蓝色的响应，没有红色和绿色的响应，那CSS和JavaScript是如何加载进来的呢？
只有把HTML、CSS、JavaScript都加载进来，豆包主页才能正常显示，为了优化加载速度，就引入了“浏览器缓存”，第一次访问豆包网页时，会把CSS/JS保存到浏览器所在的计算机的硬盘上，后续再次访问豆包网页时，只从服务器获取HTML即可，CSS/JS直接用之前存储的即可
清空Fiddler的列表，这次按住ctrl键刷新豆包网页，就会触发“全量获取数据”，也就是忽略本地的缓存，从服务器获取完整的数据，同时本地的缓存也会进行更新
如下图，蓝色的就是获取html的响应，红色的就是获取css的响应，绿色的就是获取jJavaScript的响应
有时候把css/js代码更改了，但是重新访问后，发现修改没有生效，就是因为加载网页时用的是之前缓存的css/js数据，需要通过强制刷新，更新缓存内容
4，请求和响应获取
点击豆包的一个HTTP交互，在j界面右侧看请求和响应的情况（上面是请求，下面是响应），在RAW（翻译为原始的、未加工的）部分看原始请求报文和原始响应报文
HTTP和请求和响应都是行文本（按照行的方式来组织数据的）
HTTP请求分为四部分：
- 首行：请求的第一行
- 请求头（header）：从第二行开始，往后若干行
- 空行：请求头的结束标记
- 请求正文（body）：有的请求有，有的请求没有
首先看请求报文，点击View in Notepad，在记事本中看，字体会大一些，如下图，铁汁们就会发现这里的请求是没有请求正文的，因为中间都没有空行，也就是第一行是首行，剩下的都是请求头
HTTP响应状态结构是类似的，也是分为四部分：
- 首行：响应的第一行
- 响应头（header）：从第二行开始，往后若干行
- 空行：响应头的结束标记
- 响应正文（body）：有的响应有，有的响应没有
在记事本中打开这个响应部分看下，中间是有空行的，空行下面就是响应正文
但是响应正文部分是二进制的乱码，这是因为响应正文部分经过了压缩，在响应头部分有一行是Content-Encoding: br，就代表这里是按照Brotli 压缩算法（谷歌推出）来压缩的
对数据进行压缩是为了减少传输时的网络带宽，网络带宽的成本是比较高的，这样做无非就是多消耗了一些CPU资源（因为数据要用CPU进行压缩和解压缩），但现代CPU 性能很强，服务器 CPU 平时大部分时间都是空闲的，闲置算力几乎等于免费
点击一下上面这个黄色的部分，就是进行解压缩，接着在记事本中看请求内容，就不是乱码了
结语💕💕
- 用抓包工具就能非常直观的看到客户端发给服务器的请求，以及服务器返回的全部数据。不管是接口调试、问题排查，还是理解网页通信原理，抓包都是非常实用的手段
- 下篇博客就会解析交互中请求和响应的报文格式，以及报文格式中一些属性的具体作用，这部分内容还是比较多的
以上就是今天的所有内容啦～完结撒花～🥳🎉🎉