HTTP 协议

左侧窗口抓到的包的列表列表中的内容是持续滚动的
右上窗口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-urlencodedfrom 表单提交数据的格式此时 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 存太大的数据存储最典型的应用存储用户的身份信息用户登录之后的身份