HTTP 协议网站首页 技术杂谈

没有勾选 https，没有安装根证书（无法解析 https 数据的），则抓到的东西就会很少
fiddler 作为一个代理，可能会和电脑上的其他代理冲突。比如一些浏览器插件，fq 软件，加速器软件（steam++ 不影响 fiddler，steam++ 的原理不是代理，只是自动筛选速度快的 ip，没有转发数据）

左侧窗口：抓到的包的列表，列表中的内容是持续滚动的
右上窗口：HTTP 请求的报文内容(切换到 Raw 标签页可以看到详细的数据格式——文本数据)，所谓的 HTTP 请求，其实就是通过代码构造出一个符合 HTTP 格式要求的字符串，往 tcp 的 socket 中写就行了

右下窗口：HTTP 响应的报文内容(切换到 Raw 标签页可以看到详细的数据格式——)

一个完整的 HTTP 响应也包含了4个部分：

3.2 协议格式

二、HTTP 请求

1.首行

首行：包括 HTTP 方法、请求的URL、版本号

1.1 HTTP 方法

描述了 HTTP请求是想要干什么。HTTP协议有很多种方法，不同的方法表示不同的“语义”，主要使用的语义有：GET语义，是“从服务器获取资源”；POST 语义(登陆的时候、上传文件的时候)，“往服务器里提交资源”

1.2 GET方法与 POST方法

1️⃣GET方法常用于获取服务器资源，在浏览器中输入URL，浏览器会向服务器发送一个GET请求（浏览器输入URL默认是GET方法），使用JavaScript中的ajax也能构造GET请求

GET请求的特点：

首行的方法为GET
URL的queryString可以为空，也可以不为空，数据一般存放于queryString中
body一般为空

2️⃣POST方法常用于将用户输入的数据提交到服务端（如登陆功能），通过HTML中的form标签能构造POST请求，使用JavaScript中的ajax也能构造POST请求

POST请求的特点：

首行的方法为POST
URL的queryString一般为空
body一般不为空，数据一般保存在body中

1.3 GET 与 POST方法区别（经典面试题）

其实这两个方法没有本质区别，使用 GET 的场景，替换成 POST 一般也可以；使用 POST 的场景替换成 GET 一般也行。

但是在使用习惯上存在区别：

GET 习惯上用来表示“获取一个数据”，POST 用来表示“提交一个数据”；
GET 一般没有 body，需要携带数据则放到 URL 中，POST 一般有 body；
GET 请求通常会设计成幂等的，POST 无要求

幂等：如果输入一定，得到的输出也一定，这种情况可以认为是幂等；例如：吃进去是草，挤出来的是牛奶，就是幂等；吃进去是草，挤出来不一样，就不是幂等。

幂等性在服务器开发也很关键的，设计成幂等之后，这样的请求就可以缓存了；例如：我记住了 5!=120，不是因为我算的快而是把结果记住了，因为算了一次之后，再去问 5! 就可以直接得出结果；缓存可以提高响应速度，节省运算资源

GET 可缓存(前提是幂等)，POST 则不能；
GET 请求可以被浏览器收藏，POST不能

注意网上离谱的说法，一下都是错误的说法：

GET 请求有长度限制，POST 没有长度限制：可以查 RFC 标准文档，上边说了 GET 和 POST 都没有长度限制
POST 比 GET 更安全：安全不安全取决于密码是否加密，没加密什么都是不安全的

1.4 URL（重要的概念）

唯一资源定位符，描述了网络上的唯一的一个资源

https：协议方法名，常见的有 https 和 http；其中 https 是在 http 的基础上加密了一层，安全性提升

user:pass : 登陆信息 .，现在的网站进行身份认证一般不再通过 URL 进行了 .，一般都会省略

www.example.jp：域名/地址，在此之后会有一个端口号，但是端口号可以省略；省略不是没有，而是浏览器自动加上默认的端口号；对于 http 默认端口是 80，对于 https 默认端口是 443
dir/index。html？：带层次的文件路径，表示要访问的这个服务器的资源是什么
？后边 uid=1：查询字符串(query string)，本质是一个键值对结构，键值对之间使用 & 分隔. 键和值之间使用 = 分隔，对请求的资源进行细节上的补充（http://餐厅:9/手抓饼?辣椒=少辣&葱=多葱&香菜=要）

片段标识 : 此 URL 中省略了片段标识 . 片段标识主要用于页面内跳转 . ( 例如 Vue 官方文档 : https://cn.vuejs.org/v2/guide/#%E8%B5%B7%E6%AD%A5 , 通过不同的片段标识跳转到文档的不同章节 )

1.5 版本号

版本号有HTTP/1.0、HTTP/1.1、HTTP/1.2、HTTP/1.3(最新版本)，最常见常用的是 THHP/1.1

2.请求头 header

header 的整体的格式也是 "键值对" 结构：每个键值对占一行. 键和值之间使用冒号空格分割

这里的键值对，可以有N行，会用空行作为结束标记（空行类似于链表的 null）

2.2 Host

这个属性描述了浏览器这个请求要访问的服务器的地址和端口

细心的同学已经看到了在 URL 中已经写了当前要访问的服务器了，为什么还要再写一遍❓❓

这是因为大多数情况下，Host 中的值和 URL 中的域名是一致的；但是例如，当前我们访问的服务器不是直接访问，而是通过”代理“来访问的，此时 Host 和 URL 可能就不一致了（相当于 Host 是最终目标，URL是当前目标）。因此在这里 Host写一遍进而去确认访问的服务器是什么

2.3 Content-Type 和 Content-Length

Content-Type ：描述了body 的数据格式

Content-Length：描述了 body 的长度（字节）

这两个属性是跟着 body 走的，如果是一个没有 body 的 get 请求，自然 header 中没有这两个属性

Content-Type 常见的写法：application / x-www-from-urlencoded

x-www-from-urlencoded：from 表单提交数据的格式，此时 body 的格式其实就是和 query string 是一样的

username=tz&password=123&uuid=xxxx&status

作为请求， Content-Type 最多就是上边两种写法；作为响应， Content-Type 还有几十种常见的写法：

text/html text/css application/javascript application/json image/jpg image/png........

有了上述格式的描述，浏览器/http 服务器才能狗认识当前的body，并正确进行解析

2.4 User-Agent (简称 UA)

表示用户使用的客户端的是什么样子（属性）

UA 只要描述浏览器是啥版本，系统是啥版本

2.5 Referer

表示这个页面是从哪个页面跳转过来的

注意：如果直接在地址栏输入 url，此时请求中没有 referer（如果点收藏夹效果也是一样）

此时我们打开浏览器，搜索一个内容：csdn，然后进行抓包

2.6 Cookie

Cookie 本质：浏览器在本地存储用户自定义数据的一种关键机制

浏览器进行csdn登录页面的时候，知道了我的信息身份，此时我访问csdn里的各个页面就不需要再需重新登录，因为我已经登录过了，浏览器把我的信息记录下来，所以服务器就可以识别，因此浏览器自身是需要进行存储数据的

既然要存储信息，该怎么存❓❓❓

直接存储到硬盘上是不是就可以？这个事情是万万不可以的，如果允许网页能操作电脑的文件，那么一旦不小心点到一个奇怪的网站，很可能网络就做一些恶意的事情，比如说把银盘上的学习资料一锅端。

为了保证用户上网比较安全，浏览器就会作出限制，禁止网页能够直接访问硬盘：浏览器虽然禁止直接访问硬盘，浏览器提供了 Cookie 机制，允许网页往浏览器存储一些自定义的键值对，这些数据通过浏览器提供的 api，写入特定的文件中

由于网页有很多，我访问搜狗是需要一些数据，访问百度也是需要一些数据，针对这种情况，做法是分开，每个网站都会有自己的 cookie （cookie 是按照域名维度进行存储的）；同一个网站（搜狗主页，图片）共享同一份 cookie，不同网站（搜狗、百度）则是各有各的 cookie

1️⃣Cookie 从哪里来❓❓

从服务器来，当前我们浏览器访问服务器的时候，服务器就会在 HTTP 响应中，通过 Set-Cookie字段，把 Cookie 的键值对但会给浏览器；浏览器收到数据，就会在本地存储

为了方便观察, 先清除掉之前登陆的 cookie 如上图，然后我们点击刷新页面，这个时候我们进行抓包：在响应中我们能看到几个 Set-Cookie 属性，这些都是服务器给浏览器返回的 cookie 数据，这个时候重新看删除的cookie就能显示刚刚删除的了

2️⃣Cookie 到哪里去❓❓

在下次请求的时候，把 cookie 带给服务器：由上述讲解过程，删除之后再进行请求的时候，就会把 cookie带给服务器；Cookie 在浏览器中只是“暂存”，真正要让这个数据发挥作用，还是有服务器实现

3️⃣Cookie 有啥用❓❓

是浏览器在本地存储数据的机制：存储的数据前提是字符串

每个客户端提供的服务器是不一样的：因此服务器有很多，这个时候就可以通过 cookie 进行区分。

比如说客户端在登录的时候，服务器就能识别客户端的角色，把角色信息返回给浏览器，在 cookie 中保存，后续客户端访问的时候带着这个 cookie 就行了，此此服务器就直接知道客户端时干啥的（类似于买东西的发票，有了这个发票就有了一份售后的保证，这个发票时一式两份，商家有一份，自己有一份，相当于 cookie 是一个发票）

由于cookie 存储空间有限，一般不会用 cookie 存太大的数据；存储最典型的应用：存储用户的身份信息（用户登录之后的身份）