小白图解网络学习笔记

模型：

HTTP

HTTP报文格式

1. 请求报文

GET /cmaskboss/164203142_30_1.enhance.webmask HTTP/1.1
请求方法 					URL 				协议版本
//Headers头
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

2. 响应报文

HTTP/1.1 206 Partial Content
协议版本  状态码    状态描述符
//Headers信息
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,ContentType,Accept,range
X-Cdn-Request-ID:
7e2c783ca7d392624118593ec1dc66bc

Request URL

url：协议://URL：（端口号）/虚拟目录/……（虚拟目录）/文件名？

URL与URI的区别

• URL:Uniform Resource Locator 统⼀资源定位符；

• URI: Uniform Resource Identifier 统⼀资源标识符；

​ URL是URI的子集

​ 简单解释下。 假设”小白”(URI)是⼀种资源，”在迪丽亦巴的怀里”表明了一个位置。如果你想要找到（locate）小白， 那么你可以到”在迪丽亦巴怀里”找到小白，而”在迪丽亦巴怀里的/小白”才是我们常说的URL。而”在迪丽亦巴怀里的/小白”（URL）显然是”小白”（URI）的子集，毕竟，”小白”还可能是”在牛亦菲怀⾥的/小白”（其他URL）

Request Method

请求方法：Get、POST、HEAD、OPTIONS、PUT、DELETE、TRACE 、CONNECT

GET

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

HEAD

HEAD和GET本质是⼀样的，区别在于HEAD只返回头信息(header)，不返回消息主体(body)

• HEAD省下拿body的消耗

• 如果请求的是⼀个⽐较⼤的资源，使用HEAD请求，返回的headers会带有文件的大小，不需要整个下载下来

POST

POST每次调用都可能会修改数据，是非幂等的，而GET类似于只读，是幂等的。在HTTP规范中POST是非等幂的，多次调用会产生不同的结果

• 幂等（Idempotent）：指一个操作的重复执行不会产生额外的影响。无论对一个操作进行一次或多次的执行，系统状态都会保持一致。换句话说，多次执行幂等操作所产生的结果与执行一次的结果相同。常见的幂等操作包括GET请求、删除某个资源等。

• 非幂等（Non-Idempotent）：指一个操作的重复执行会导致系统状态发生变化。多次执行非幂等操作可能会对系统产生不同的影响，导致状态发生改变。比如POST请求、创建资源等操作通常是非幂等的。

PUT

创建⼀个用户,由于网络原因或是其他原因多创建了几次,那么将会有多个用户被创建。而PUT id/xiaobai 则会创建一个id为 xiaobai 的用户，多次调用还是会创建的结果是⼀样的，所以PUT是等幂的

DELETE

⼀般实战中如果是删除操作，也是使用POST来替代

OPTIONS

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

• Response Header里的关键字段

  

跨域的情况下，浏览器发起复杂请求前会自动发起 options 请求

简单请求

• 请求方法为 GET、HEAD、POST
• 只有以下 Headers 字段
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type
  • DPR/Downlink/Save-Data/Viewport-Width/Width (这些不常见，放在⼀起)
• Content-Type 只有以下三种
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
• 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器；
• 请求中没有使用 ReadableStream 对象。

复杂请求

• 不满足简单请求的，都是复杂请求

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

跨域

• 同源：域名、协议、端⼝均相同

例子：

注意：localhost和127.0.0.1虽然都指向本机，但也不属于同源

• 非同源之间网页调用就是我们所说的跨域
• 每次复杂请求前都要使用options询问一次

如何优化options

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

​ Access-Control-Max-Age 就是优化这个流程中使用的⼀个Header。它的作用是当你每次请求 options 方法时，服务端返回调用支持的方法（Access-Control-Allow-Methods ）和 Headers（Access-Control-Allow-Headers）有哪些，同时告诉你，它在接下来 Access-ControlMax-Age 时间（单位是秒）里都支持，则这段时间内，不再需要使用options进行请求。

​ 特别注意的是， 当 Access-Control-Max-Age 的值为-1时，表示禁用缓存，每⼀次请求都需要发送预检请求，即用 OPTIONS请求进行检测。

Status Code（状态码）

浏览器向服务器发送请求，服务器则会根据请求作出响应，而状态码则是响应的⼀部分，代表着本次请求的结果。