在B站看猫片被老板发现？不如按下F12学学HTTP

有点抽象？不知道说的啥？那实操一下，用wireshark抓包看一下猫片里的请求报文和响应报文具体长什么样子吧

请求报文

GET /cmaskboss/164203142_30_1.enhance.webmask HTTP/1.1
Host: upos-sz-staticks3.bilivideo.com
Connection: keep-alive
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36
Accept: */*
Origin: https://www.bilibili.com
Sec-Fetch-Site: cross-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: https://www.bilibili.com/
Accept-Encoding: identity
Accept-Language: zh-CN,zh;q=0.9
Range: bytes=0-16
复制代码

这上面第一行的GET 就是请求方法，/cmaskboss/164203142_30_1.enhance.webmask 则是 URL , 而HTTP/1.1则是协议版本。接下来从Host开始到最后一行Range，都是Headers头。

响应报文

HTTP/1.1 206 Partial Content
Content-Type: application/octet-stream
Content-Length: 17
Connection: keep-alive
Server: Tengine
ETag: "92086de1e6d1d4791fb950a0ac7e30ba"
Date: Sat, 30 Jan 2021 09:31:31 GMT
Last-Modified: Sun, 04 Oct 2020 01:54:28 GMT
Expires: Mon, 01 Mar 2021 09:31:31 GMT
Age: 1018695
Content-Range: bytes 0-16/353225
Accept-Ranges: bytes
X-Application-Context: application
x-kss-request-id: 75bcbfa8ab194e3c825e89c81a912692
x-kss-BucketOwner: MjAwMDAyMDEwNw==
X-Info-StorageClass: -
Content-MD5: kght4ebR1HkfuVCgrH4wug==
X-Cache-Status: HIT from KS-CLOUD-JH-MP-01-03
X-Cache-Status: HIT from KS-CLOUD-TJ-UN-14-13
X-Cache-Status: HIT from KS-CLOUD-LF-UN-11-25
Access-Control-Allow-Origin: https://www.bilibili.com
Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,range
X-Cdn-Request-ID: 7e2c783ca7d392624118593ec1dc66bc
复制代码

类似请求报文，HTTP/1.1是协议版本，206是状态码，Partial Content 则是状态描述符。接下来从Content-Type开始到最后一行X-Cdn-Request-ID都是Headers信息。

报文信息解读

其实上面的抓包信息，在浏览器里按F12就能看到，之所以要用wireshark可能只是装X效果比较好吧。按下F12看到的响应数据就跟下图展示的那样。

1.请求数据

2.响应数据

3.Request URLURL是什么

URL 代表着是统一资源定位符（Uniform Resource Locator）。作用是为了告诉使用者 某个资源在 Web 上的地址。这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像或一个猫片等等。上面我们请求猫片的URL就是 这里面细分，又可以分为好几个部分。

表示该URL的协议部分为http还是https，会用//为分隔符。上面的URL表示网页用的是HTTPS协议，而上面提到的X影天堂用的则是ftp协议的下载链接。

域名是upos-sz-staticks3.bilivideo.com，在发送请求前，会向DNS服务器解析IP，如果已经知道ip，还可以跳过DNS解析那一步，直接把IP当做域名部分使用。

域名后面有些时候会带有端口，和域名之间用:分隔，端口不是一个URL的必须的部分。当网址为时，默认端口为80

当网址为时，默认端口为443，以上两种都可以省略端口号。上面的URL其实省略了443端口号。

从域名的第一个/开始到最后一个/为止，是虚拟目录的部分。虚拟目录也不是URL必须的部分，本例中的虚拟目录是/cmaskboss/

从域名最后一个/开始到?为止，是文件名部分；如果没有?，则是从域名最后一个/开始到#为止，是文件名部分；如果没有?和#，那么就从域名的最后一个/从开始到结束，都是文件名部分。本例中的文件名是164203142_30_1.enhance.webmask，文件名也不是一个URL的必须部分。

URL 和 URI 的区别

其实一直有个误解，很多人以为URI是URL的子集，其实应该反过来。URL是URI的子集才对。简单解释下。 假设"卖客"(URI)是一种资源，而"在迪丽亦巴的怀里"表明了一个位置。如果你想要找到（locate）卖客，那么你可以到"在迪丽亦巴怀里"找到卖客，而"在迪丽亦巴怀里的/卖客"才是我们常说的URL。而"在迪丽亦巴怀里的/卖客"（URL）显然是"卖客"（URI）的子集，毕竟，"卖客"还可能是"在牛亦菲怀里的/卖客"（其他URL）。

4.Request Method

HTTP 定义了一组请求方法，以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作.。虽然他们也可以是名词，但这些请求方法有时被称为HTTP动词.。每一个请求方法都实现了不同的语义。

这次请求B站猫片的请求里用的是GET，意味着获取。但其实HTTP定义了多种请求方法，来满足各种需求。除了Get，还有几个POST、HEAD、OPTIONS、PUT、DELETE、TRACE 和 CONNECT。

常见的各个请求方法的具体功能如下：

GET

请求指定的页面信息，并返回消息主体(body)+头信息(header)。

HEAD：

HEAD和GET本质是一样的，区别在于HEAD只返回头信息(header)，不返回消息主体(body)。大家不要以为它没用，它跟GET和POST一样，在http/1.0的时候就存在了，实属三元老之一了。主要用途

POST

向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。POST跟GET最常用，但最大的区别在于，POST每次调用都可能会修改数据，是非幂等的，而GET类似于只读，是幂等的。

PUT：

这个方法比较少见。在HTTP规范中POST是非等幂的，多次调用会产生不同的结果。比如：创建一个用户,由于网络原因或是其他原因多创建了几次,那么将会有多个用户被创建。而PUT id/xiaobai 则会创建一个id为 xiaobai 的用户，多次调用还是会创建的结果是一样的，所以PUT是等幂的。但是一般为了避免造成心智负担，实战中也会使用POST替代PUT。

DELETE：

删除某一个资源。基本上这个也很少见，一般实战中如果是删除操作，也是使用POST来替代。

OPTIONS：options是什么

它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP响应头部中带上给各种“Allow”的头，表明某个请求在对应的服务器中都支持哪种请求方法。比如下图：

这里面需要关注的点有两个

Options堪称是网络协议中的老实人，就好像老实人刚谈了个女朋友，每次牵手前都要问下人家 “我可以牵你的手吗？”， “我可以抱你吗？”，得到了答应后才会下手。差点被这老实人气质感动得留下了不争气的泪水。

什么时候需要使用options

在跨域（记住这个词，待会解释）的情况下，浏览器发起复杂请求前会自动发起 options 请求。跨域共享标准规范要求html浏览器里不显示，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 options 方法发起一个预检请求，从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。

这里提到了两个关键词：

什么是简单请求和复杂请求。

某些请求不会触发 CORS 预检请求，这样的请求一般称为"简单请求"，而会触发预检的请求则为"复杂请求"。

复杂请求

由此可见，因为上述请求在获取B站资源的请求Headers里带有 Access-Control-Request-Headers: range , 而range正好不在简单请求的条件2中提到的Headers范围里，因此属于复杂请求，于是触发预检options请求。

什么是跨域

刚刚提到了一个词叫跨域，那什么是跨域呢？在了解跨域之前html浏览器里不显示，首先要了解一个概念：同源。所谓同源是指，域名、协议、端口均相同。

不明白没关系，举个例子。

需要特别注意的是，localhost和127.0.0.1虽然都指向本机，但也不属于同源。

而非同源之间网页调用就是我们所说的跨域。在浏览器同源策略限制下，向不同源发送XHR请求，浏览器认为该请求不受信任，禁止请求，具体表现为请求后不正常响应。

options带来什么问题

由此可见，复杂请求的条件其实非常容易满足，而一旦满足复杂请求的条件，则浏览器便会发送2次请求（一次预检options，一次复杂请求），这一次options就一来一回（一个RTT），显然会导致延迟和不必要的网络资源浪费，高并发情况下则可能为服务器带来严重的性能消耗。

如何优化options

每次复杂请求前都会调用一次options，这其实非常没有必要。因为大部分时候相同的请求，短时间内获得的结果是不会变的，是否可以通过浏览器缓存省掉这一次查询？

Access-Control-Max-Age就是优化这个流程中使用的一个Header。它的作用是当你每次请求options方法时，服务端返回调用支持的方法（Access-Control-Allow-Methods ）和Headers（Access-Control-Allow-Headers）有哪些，同时告诉你，它在接下来 Access-Control-Max-Age时间（单位是秒）里都支持，则这段时间内，不再需要使用options进行请求。特别注意的是，当Access-Control-Max-Age的值为-1时，表示禁用缓存，每一次请求都需要发送预检请求，即用OPTIONS请求进行检测。

5.Status Code状态码是什么

HTTP Status Code是常说的HTTP状态码。当用户访问一个网页时，浏览器会向网页所在服务器发出请求。服务器则会根据请求作出响应，而状态码则是响应的一部分，代表着本次请求的结果。所有状态码的第一个数字代表了响应的大概含义，组合上第二第三个数字则可以表示更具体的原因。如果请求失败了，通过这个状态码，大概初步判断出这次请求失败的原因。以下是五类状态码的含义。

状态码流程

可以根据以下流程图了解下各类状态码间的关系。

常见状态码介绍

这是最常见的状态码。代表请求已成功，数据也正常返回。而B站猫片里虽然响应成功了，但却不是200，而是206，是为什么呢，接下去继续看看。

这个状态码在上面B站请求的响应结果。服务器已经成功处理了部分 GET 请求。类似于B站看视频或者迅雷这类的 HTTP下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。

6. HeadersContent-Length

Content-Length是HTTP的消息长度, 用十进制数字表示。Content-Length首部指出报文中消息的当前实际字节大小。如果消息文本进行了gzip压缩的话， Content-Length指的就是压缩后的大小而不是原始大小。

正常情况下Content-Length是不需要手动去设置的，大部分语言的网络库都会自动封装好，但是如果在一些特殊情况下，出现Content-Length与实际要发送的消息大小不一致，就会出现一些问题。

Range

视频播放需要支持用户调整播放进度，支持让用户选择直接跳到中间部分开始播放。为了实现这个功能，需要通过HTTP Range Requests 协议用于指定需要获取视频片段。而 Request Header里的range头则是用于指定要请求文件的起始和结束位置。

Connection长连接和短连接

在http1.1中Request Header和Reponse Header中都有可能出现一个Connection: keep-alive 头信息。Request Header里的Connection: keep-alive 头是为了告诉服务端，客户端想要以长连接形式进行通信。而Response Header里的Connection: keep-alive 头是服务端告诉客户端，我的服务器支持以长连接的方式进行通信。如果不能使用长连接，会返回 Connection: close ，相当于告诉客户端“我不支持长连接，你死了这条心，老老实实用短连接吧” 。