http协议和Fiddler

一、http协议的报文结构

1.1http请求和http响应之间的区别

http协议的格式分为请求和响应两种格式。
http请求格式：
①首行。即http请求的第一行。有三个部分的信息，每个部分的信息使用空格分割。
(1)GET。即http请求的方法(method)。
(2)URL。唯一资源定位符，描述了一个资源在网络上的位置。
(3)版本号。比如HTTP/1.1。

②请求头(header)。请求头是一个键值对结构的数据，每个键值对独占一行，键和值之间使用:空格来区分。这里的键值对都是标准规定的。

③空行。空行是请求头的结束标记。

④正文(body)。有的http请求有正文，有的http请求无正文。

http响应格式：
①首行。比如HTTP/1.1 200 OK。
(1)版本号。HTTP/1.1。
(2)状态码。描述了请求的结果(描述了请求是成功还是失败还是其它结果)。
(3)状态码的描述。对状态码又做了进一步的解释，即解释状态码200是OK(成功)的意思。

②响应头(header)。响应头也是一个键值对结构的数据，每个键值对独占一行，键和值之间使用:空格来区分。这里的键值对也都是标准规定的。

③空行。空行是结束头的结束标记。

④正文(body)。正文可以有也可以没有，正文里的内容可以比较长，可能是多种格式的数据，比如HTML、CSS、JS、JSON、XML、图片、字体、视频、音频……

1.2http请求

1.2.1URL

URL(唯一资源定位符)是计算机中非常重要的概念，描述了一个资源在网络上的位置。
URL(唯一资源定位符)的格式是标准文档中规定的，比如http://user:pass@www.example.jp:80/dir/index.htm?uid=1#ch1

(1)http://表示协议名称。

(2)user:pass表示登录信息(这个登录信息现在几乎不用了)。

(3)@是分割符。

(4)www.example.jp表示服务器地址(这个服务器地址可以是IP地址也可以是域名)。

(5)80表示端口号，URL中的端口号有时可以省略，对于http请求如果省略端口号则默认访问的是80端口(相当于浏览器给一个默认值)，对于https请求如果省略端口号则默认访问的是443端口。

(6)/dir/index.htm描述了要访问服务器某个程序上的哪个资源，虽然写法看起来像是一个目录结构的写法，但实际上资源不一定是在服务器上的某一个目录中(资源不一定在硬盘中)，资源可能是内存中的数据、可能是硬盘中的数据、可能是通过网络访问其它服务器拿到的数据、可能是通过cpu计算出来的一些数据……，按照目录结构来写只是为了方便我们在代码里能够确认资源在哪。这里资源怎样组织也和我们服务器中的代码怎样编写有密切的关系。

(7)uid=1是查询字符串(query string)，查询字符串相当于针对请求进行了进一步的补充说明。查询字符串是一种键值对结构的数据，从?开始，键值对之间使用＆来分割，键和值之间使用=来区分，一个URL中的查询字符串(query string)里可以包含很多个键值对也可以没有键值对。查询字符串(query string)中的键值对是程序员自定义的，不像header中的键值对那样都是标准规定。
查询字符串(query string)的value部分如果要包含一些特殊的符号，则这些特殊的符号往往需要进行urlencode操作(如果不这样做的话有些浏览器就可能会解析失败导致请求无法正常进行)。urlencode本质上是一种转义字符。因为+ ? : /……这些符号在URL中已经有特殊用途了，如果要在value中包含这些特殊符号，则要对这些特殊符号进行转义，比如+的ASCII值是2B(十六进制)，在前面加上%表示这是转义的结果，即C++写成C%2B%2B。中文也要进行转义，因为中文里包含几个字节，这几个字节里编码的内容有可能恰好就和某个特殊符号的内容重复了，比如你好写成%E4%BD%A0%E5%A5%BD(这里一个汉字占三个字节是utf-8编码)。
(4)(5)(6)(7)是重点。

(8)#ch1是片段标识符。有的网页内容比较长，这时就可以把网页分成多个片段，通过片段标识符可以完成页面内部的跳转，使用片段标识符这种情况现在一般比较少见，但在技术文档中经常会见到。

1.2.2方法

(1)GET
(2)POST，1)用在登录，2)用在上传文件。上传文件时比如上传图片，图片的正文(body)比较长，正文(body)是图片本体，图片本身是二进制数据，此处把图片放入http请求中，往往要进行base64转码(针对二进制数据重新进行编码，编码之后的数据就是纯文本的数据了)。

浏览器显示的页面其实是从服务器中加载的html。有时html内容很多体积比较大通过网络加载会消耗较长时间，所以浏览器会带有缓存功能即把之前加载过的页面保存到本地硬盘上，下次访问时直接读取本地硬盘上的数据即可。所以有时抓不到包是因为命中了浏览器缓存，要用Ctrl+f5强制刷新页面。

GET和POST的区别：
GET和POST没有本质区别，双方可以相互替换，GET和POST虽然没有本质区别，但是使用习惯上还是存在一定的差异的，比如：
(1)GET请求通常会把要传给服务器的数据加到URL(唯一资源定位符)的query string(查询字符串)中。
POST请求通常会把要传给服务器的数据加到正文(body)中。
但这种情况也不是绝对的，GET请求也可以把数据加到正文(body)中，POST请求也可以把数据加到query string(查询字符串)，但这样做的前提是客户端和服务器都得按照同样的方式来处理代码。
(2)GET和POST在语义上有差异。虽然http请求的各种方法在使用时这些方法的语义是比较混乱的，但相比之下GET和POST的语义还是比较明确的。
GET在大多数情况下还是用来获取数据，POST在大多数情况下还是用来提交数据(登录、上传)。

1.2.3请求头

请求头里有标准规定的键值对。

1.2.3.1Host

Host表示服务器的IP地址和端口号，比如Host: www.baidu.com，这个信息在URL中也有，URL中的信息和Host中的信息大部分情况下是一样的，但是有些场景下也会存在差异(比如在代理的场景中)。

1.2.3.2Content-Length、Content-Type

请求里有正文body才会有这两对键值对，通常情况下GET请求没有正文body，POST请求有正文body。
Content-Length表示正文body中数据的长度。
粘包问题：对于GET这种没有正文body的请求，直接使用空行作为应用层包与包之间的分隔符。对于POST这种有正文body的请求，就结合空行和Content-Length(通过空行知道正文body从哪里开始另一方面通过Content-Length知道正文body到哪里结束)来区分应用层数据包从哪到哪是一个完整的包。相对应地http响应也是用这种方法来解决粘包问题。

Content-Type表示正文body中数据的格式。
请求中正文body中的格式：
1)json。 比如Content-Type: application/json;charset=UTF-8。
2)form表单的格式。相当于把GET请求中的查询字符串query string(键值对)移动到了正文body中。比如Content-Type: application/x-www-form-urlencoded; charset=UTF-8。
3)form-data的格式。上传文件的时候会涉及到form-data的格式，但上传文件时也不一定是form-data的格式也可能是form表单的格式。

1.2.3.3User-Agent(简称UA)

比如：User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36。
(Windows NT 10.0; Win64; x64)表示操作系统版本，Chrome/117.0.0.0表示浏览器版本，所以User-Agent描述了用户在使用什么设备在上网。
早期的浏览器功能比较简单，后来浏览器逐渐升级，新的浏览器诞生之后不是立即就能占据全部市场，相当一部分时间里新版本的浏览器和旧版本的浏览器并存。网站开发者要考虑是否要兼容旧版本的浏览器，User-Agent记录了浏览器的版本，这使得哪个版本的浏览器都支持哪些特性这样的内容就容易获取到了。现在浏览器之间的差异已经非常小了所以User-Agent的作用已经没有那么关键了，User-Agent现在主要用来区分是pc端还是移动端(用来统计)。

1.2.3.4Referer

Referer描述了当前页面是从哪个页面跳转过来的。
如果在地址栏输入URL或者点击收藏夹中的内容这时请求头header中是没有Referer的。
比如Referer: https//www.baidu.com/表示当前页面是从百度主页跳转过来的。
比如进入广告主的页面之后，请求头header中也有一个Referer: https//www.baidu.com/web?query=%E4……，表示当前请求是从百度这边跳转过来的。

1.2.3.5Cookie

Cookie可以认为是浏览器在本地存储数据的一种机制。
浏览器的数据来自服务器，浏览器后续的操作也要提交给服务器，服务器管理着网站的各种核心数据，但程序在运行过程中也会有一些临时性数据需要存储在浏览器这边(比如上次登录的时间、上次访问的时间、用户的身份信息、累计访问次数……)，并且这些存储在浏览器这边的数据在后续向服务器发送请求的时候可能需要再次发给服务器。
那为什么不把这些数据存储在本地文件中呢？因为浏览器要考虑到安全性，如果网页里有病毒，把网页中的病毒数据存储在了本地文件中，病毒就有可能把硬盘上的数据都删掉。

为了保证安全性同时也能存储数据，于是就引入了Cookie，Cookie也是按照硬盘文件的方式来保存数据，但网页只能往Cookie中存储固定的键值对(这里的键值对是程序员自定义的，是简单的字符串，Cookie以键值对的形式来组织数据)。Cookie中的数据往往是从服务器中返回的数据(也可以由网页自己生成)，Cookie中的数据存储到浏览器所在主机的硬盘上并且以域名为维度来存储，每个域名下可以有自己的Cookie(比如百度有百度的Cookie，头条有头条的Cookie)。
后续给服务器发送请求的时候，就会把Cookie中的内容代入到请求中发送给服务器。
比如在edge浏览器地址栏前面点击锁头的图标，点击正在使用Cookie，可以查看某个域名下的Cookie。
比如Cookie: usid=AC4988……(键值对之间使用;分割，键和值之间使用=区分)，这些内容是浏览器本地缓存的Cookie，都会在后续浏览器请求服务器的时候被代入到请求中发送给服务器。

1.3http响应

1.3.1响应状态码

响应状态码表示了这次请求对应的响应是什么样的状态(响应是成功还是失败还是其它情况，对应的原因是什么……)
(1)2xx表示成功，其中200是最常见的。
(2)3xx表示重定向，比如请求中访问的是1地址，响应返回一个重定向报文，让客户端最终访问的是2地址。
比如用于实现登录成功后自动跳转页面；比如某个网站的服务器迁移了(IP/域名变了)，此时可以用重定向让访问旧地址的用户自动跳转到新的地址。
常见的是临时重定向302(比如网站临时搬到另一个地址去了可能后面又会搬回来)，永久重定向301(比如网站永远搬到另一个地址去了)，永久重定向可以被缓存，临时重定向一般不能缓存。重定向响应报文的响应头header会包含一个Location字段, 表示要跳转到哪个页面。
(4)4xx表示请求错误。常见的是404(表示请求中访问的资源在服务器上不存在)，403(表示访问的资源没有权限)。
特殊的状态码418(I am a teapot!)，这个状态码没有实际的意义(彩蛋)。
(5)5xx表示服务器出错了(服务器崩溃)。

1.3.2响应头

请求头里有标准规定的键值对。

1.3.2.1Content-Length、Content-Type

响应里有正文body才会有这两对键值对。
Content-Length表示正文body中数据的长度。
Content-Type表示正文body中数据的格式。
响应中正文body中的格式：
1)html。Content-Type: text/html; charset=UTF-8。
2)css。Content-Type: text/css。
3)js。Content-Type: application/javascript; charset=UTF-8。
4)json。Content-Type: application/json;charset=UTF-8。
5)图片。Content-Type: image/png。
……
给服务器提交请求，针对不同Content-Type的请求，服务器会有不同的处理数据的逻辑。服务器返回响应给浏览器，针对不同Content-Type的响应，浏览器也会做出不同的处理。

二、Fiddler

要用抓包工具查看http协议请求和响应的格式。抓包工具可以把网卡上经过的数据获取到并显示出来，抓包工具是分析和调试程序的重要手段。

Fiddler抓包工具是专门抓http的抓包工具。

Fiddler打开之后是一个页面结构为左右结构的程序，左侧列表列出了抓到的包有哪些，右侧是包的详情，右侧上方是请求详情，右侧下方是响应详情。

新安装的Fiddler需要手动开启https功能并且安装证书才能抓https，否则只能抓http。当前互联网环境上以https为主，http已经非常少见了。Fiddler开启https：在菜单栏点Tools和Options…，然后点https，然后把里面的勾全勾上，之后会弹出一个框问是否要安装根证书，要选同意。

2.1使用Fiddler

①删除抓到的包，比如全删：Ctrl+a，然后delete。

②刷新网页后Fiddler会抓到一些http数据包，因为一个网页打开的时候客户端往往不是只和服务器进行一次交互，一般是进行多次交互。

③显示蓝色的包表示请求得到的响应是html(网页)这样的包(这是我们重点关注的地方)，灰色的地方可以直接忽略，黑色的包是普通数据包(具体的数据是什么我们要看程序员的代码是怎样写的才能知道)。我们点击蓝色的包，在右侧上方请求详情的两排标签页中点row(原始的)，因为我们要关注请求数据的最原始的格式(理解了数据的原始格式才能把http协议理解)，这时请求数据最原始的格式在右侧上方显示出来，但字太小不好看我们可以点击右侧上方的右下方View in Notepad用记事本打开，可以在记事本格式中设置字体大小等各种操作。

从记事本的请求数据原始格式中可以看出http协议是文本格式的协议(因为协议里的内容都是看得懂的字符串)，而TCP、UDP、IP都是二进制格式的协议。http响应也是文本格式，但直接查看往往能看到部分的二进制数据，因为http响应经常会被压缩，压缩之后体积变小传输的时候节省网络带宽，网络带宽是最贵的硬件资源，压缩和解压缩消耗额外是cpu和时间但节省了网络带宽。

http响应解压缩(点击右下角响应详情里的Response body is encoded.Click to decode.进行解压缩)之后可以看到响应的是文本格式的内容、响应的是html(带有html的标签)，浏览器显示的网页就是html，这通常是浏览器先请求对应的服务器，然后从服务器中拿到页面数据html加载过来浏览器中，网站每次打开网页都是一个重新加载的过程，这对网络带宽又有了进一步的要求。