HTTP请求协议格式详解

请求协议格式

HTTP请求协议由首行、请求头（header）、空行、正文(body)组成。通过空行来区别header和body，body可有可无，若body存在，则在header中会定义一个content-length属性来标识body的长度。

1. 首行

首行 = 方法 + URL + 版本号

1.1 URL

一个完整的URL包括：
协议://主机名(域名):端口号/路径/查询字符串query string

以一个比较复杂的URL做例：
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor

• https:// 协议名
• www.example. 域名，等价于IP地址，能够表示一个网络上的主机
• com:80 端口号为80，一般情况下端口号都会省略。当端口号省略时，浏览器会根据协议类型自动决定使用哪个端口。默认情况下HTTP协议使用80端口，HTTPS协议使用443端口。
• /path/to/myfile.html 带层次的文件路径，用于定位到程序管理的资源。
• key1=value1&key2=value2#anchor
  ❓后面的都是查询字符串query string，其本质是一个键值对结构，用于在请求中带上一些参数信息，传递给服务器。
• 片段标识，该URL中省略了片段标识，其主要用于页面内跳转。
  以上URL中的各部分，皆可以省略。

1.2 方法

HTTP首行的方法种类较多，但常用的只有前两个，下面也只详细介绍GET和POST方法。
如下的表格列举了各方法以及其功能，但是直到今天为止，程序员对于各种方法已经用的随心所欲，而不考虑其功能了，所以具体这个方法起到了什么作用，还是要根据程序员的代码进行分析~毕竟大家都这么用也不能算是错误用法，只能说目前都习惯这么随便用吧。

方法	说明
GET	获取资源
POST	传输实体主体
PUT	传输文件
HEAD	获得报文首部
DELETE	删除文件
OPTIONS	询问支持的方法
TRACE	追踪路径
CONNECT	要求用隧道协议链接代理
LINK	建立和资源之间的联系
UNLINE	断开连接关系

1.2.1 GET方法

GET方法是最常见的HTTP请求，一般有以下几种情况可能触发GET方法的请求。

1. 浏览器中输入URL回车 （ 浏览器收藏夹中的链接也是同样的效果）
   
2. HTML中含有地址的一些标签

• img标签中的src属性就可以写一个URL，浏览器会根据img中的src构造出一个HTTP GET请求；
• a标签中的href属性，也可以通过出点击网页中的a标签，构造出对应的HTTP GET请求；

3. 使用JS，直接在浏览器前端构造出HTTP GET 请求(ajax)；

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $.ajax({ //异步
            url:'http://42.192.83.143:8089/AjaxMockServer/info',
            method:'GET',
            //回调函数
            success:function(data,status){
                console.log(data);
                console.log(status);
            }
        });
    </script>

4. 其实只要是能够访问网络的编程语言，都能构造出HTTP GET请求；

GET 方法的特点

1. 首行中第一个是GET；
2. URL中的query string 可以为空，也可以不为空；
3. GET请求中有若干组header这样的键值对；
4. GET请求一般body都为空；

1.2.2 POST方法

一般登录页面中会触发POST请求，输入了用户名以及密码后，点击登录，就会产生POST请求。

如上图例子所示，我们可以观察总结出POST请求的特点。

POST方法的特定

1. 首行中第一个是PST；
2. URL中的query string一般是没有的；
3. GET请求中有若干组header这样的键值对；
4. GET请求一般body都不为空。其中，body的具体长度由header中的Content-Length来描述，body的具体数据格式由header中的Content-Type来描述；

[经典面试题] GET方法与POST方法的区别？

两者没有本质区别~使用GET的场景，完全可以使用POST替代，使用POST的场景也一样可以使用GET替代。

1. 语义不同。GET习惯上用于从服务器上获取数据，POST是向服务器传送数据。
2. 格式不同。由于body一般是空的，所以GET习惯上通过query string 来传输数据；而POST方法的query string 一般为空，所以POST习惯上使用 body 来传递数据。
3. . 幂等性。一般情况下，程序员会把GET请求的处理实现成幂等，而POST请求的处理，不要求实现幂等。

幂等：一次和多次请求某一个资源对于资源本身应该具有同样的结果（网络超时等问题除外）。也就是说，其任意多次执行对资源本身所产生的影响均与一次执行的影响相同。例如我通过网上银行支付一笔订单，但由于该时间段在线人数过多或网络不好，我支付了以后就卡在这个页面没有成功，此时若我重复提交支付操作，也只扣了一次费用，没有产生额外的负面效果，则说明该网页设计具有幂等性。

4. 缓存。GET请求可以被缓存，可以被浏览器把偶才能到收藏夹中，而POST请求不可。

1.2.3 其他方法

其他方法就是上述表中列举的一些，仅作了解即可，常用的还是GET和POST。

2. 请求头

请求头是由若干个键值对的结构组成的，每个键值对独占一行，使用冒号分割键与值，遇到空行表示header部分结束。

2.1 Host

Host表示该请求所对应的服务器的地址，地址可以是域名，可以是IP地址，也可以手动指定端口号。

2.2 Content-Length

Content-Length表示body的长度，单位是字节。GET中一般没有body,所以抓包POST请求才能看到该header。

2.3 Content-Type

Content-Type表示body的格式。同上，只有该请求是POST时，才会带上Content-Length和Content-Type这来给你个header。

Content-Type 常见取值：

• application/x-www-form-urlencoded；
  form 表单提交的数据格式. 此时 body 就是用类似于query string这样的格式来进行组织。
• multipart/form-data；
  使用HTML时提交图片/文件时，会出现种格式。
• application/json；
  数据为 json 格式,body格式形如下方的键值对形式。键值对之间使用 逗号 分割，键与值之间使用 冒号 分割。

{"title":"test","sub":"测试"} 

2.4 User-Agent / UA

UA表示浏览器 / 操作系统的属性。形如

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36

其中，Windows NT 10.0; Win64; x64 表示操作系统是Windows 10，64位系统；
Chrome/91.0.4472.77 Safari/537.36说明了当前的浏览器以及浏览器版本。

2.5 Referer

Referer表示该页面是从哪个页面跳转过来的。如果直接在网址中输入URL回车抓到的包是没有Referer的。

2.6 Cookie

下面是抓到一个报文格式中的Cookie细节。不难发现，Cookie中也是由若干的键值对结构组成的，每个键值对之间使用；分割，键与值之间之用= 分割。至于键值对所表示的含义，是由网站开发的程序员自定义的。

Cookie: runoob-uuid=a07ab814-1920-4f66-9a2d-e00074f33900; _ga=GA1.2.2125547423.1646032953; _gid=GA1.2.65496705.1646032953; __gads=ID=3b377f2a9b5979bd-224586d1c5d00004:T=1646032953:RT=1646032953:S=ALNI_MYYASEYH9bJmBounu7Wpcb9tMqm4A; _gat_gtag_UA_84264393_2=1; Hm_lvt_3eec0b7da6548cf07db3bc477ea905ee=1646032953,1646043712,1646043717; Hm_lpvt_3eec0b7da6548cf07db3bc477ea905ee=1646043717

Cookie的作用

首先我们需要明确的是，浏览器为了保证安全性，是允许网页中的代码读写浏览器所在的主机的硬盘的。但是有些时候我们又确实需要存储一些必要的数据，比如网页的登陆页面，现在绝大多数网站都可以做到首次登录，后面会记住登录状态无需次次登录，那么用户的账户信息是如何存储的呢？
Cookie的作用就是给程序员提供了一种能在本地存储数据的能力。
虽然浏览器不允许程序员读写客户端的文件，但是提供了Cookie这样的机制，按照键值对存储，来代替直接访问文件。而Cookie中存储的内容是由浏览器管理的，会持久化存在~除非手动清楚。

清楚历史Cookie中存储的数据

按照下图中的方式，点击浏览器网址栏左边的小锁会打开Cookie，按照域名分文件存储。若是把相关的Cookie存储的数据全部删除，那么这个网址就会和首次访问是一样的状态，用户信息等等全部清空。

如何向Cookie中存储数据？

下面的例子中浏览器清楚了Cookie存储的数据后重新访问搜狗主页，可以看到请求中的Cookie对应的就是网页中的相应的数据。

Cookie工作原理？

Cookie会在后续的请求中，将存储在浏览器本地的数据发送给服务器~具体工作流程如下：