聊聊网络基础

1. TCP/IP

1.1 网络七层协议/四层协议

参考图从网上获取。

应用层

也就是接口层。TCP/IP协议族内预存了各类通用的应用服务。比如FTP, DNS, TELNET, SSH, HTTP, SMTP, POP, SSL/TLS, FTP, MIME.....等。

表示层

负责数据格式的转换，将应用处理的信息转换为适合网络传输的格式。

会话层

自动收发包，自动寻址，建立和管理应用程序之间的通信。

传输层

提供处于网络连接中的两台计算机之间的数据传输，包括TCP和UDP等。保证报文正确传输。

网络层

网络层处理在网络上流动的数据包。通过路由选择算法，为报文通过通信子网选择最适当的路径，定义IP地址，通过IP地址寻址，产生了IP协议。

数据链路层

通过各种控制协议，将有差错的物理信道变为无差错的、能可靠传输数据帧的数据链路。

物理层

解决硬件的通信问题，常见的物理媒介有光纤、电缆等。

1.2 TCP

TCP传输协议的三次握手：发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后，发送端再回传一个带ACK标志的数据包，代表握手结束。

参考图网上获取：

src=http___upload-images.jianshu.io_upload_images_9210272-0a812e176659f77d.jpg&refer=http___upload-images.jianshu.jfif

1.3 HTTP

HTTP协议用于客户端和服务器之间的通信。HTTP是不保存状态的协议，利用cookie存取状态。

1.4 HTTP与HTTPS

HTTPS是在HTTP协议的基础上，添加了SSL传输协议保证数据安全性。

1.5 HTTP协议的通信流程

客户端发起链接请求:www.test.com
DNS服务器返回域名对应的IP地址。
客户端向对应IP地址发送请求报文，步骤如下：
- 应用层HTTP协议的职责：生成针对目标Web服务器的HTTP请求报文。
- 传输层TCP协议的职责：将HTTP请求报文分割成报文段，再把每个报文段可靠的传递给对方。
- 网络层IP协议的职责：搜索对方的地址，一边中转，一边传送数据包。
- 链路层：对应的服务器在链路层收到数据，按序往上层发送，一直到应用层。
- 传输层TCP协议的职责：从客户端接收到的报文段后，按序号以原来的顺序重组请求报文。
- 应用层HTTP协议的职责：对web服务器请求内容进行处理。
此时服务端真正接收到由客户端发送过来的HTTP请求。
请求的处理结果同样利用TCP/IP通信协议向用户回传。

2. HTTP方法

GET

GET方法用来请求访问已被URI识别的资源。

POST

POST方法用来传输实体的主体。

PUT

PUT用来传输文件。REST风格定义的接口使用PUT方法更新资源。

HEAD

HEAD方法获得报文首部，不返回报文主体部分。

DELETE

DELETE方法用于删除文件。

OPTIONS

OPTIONS方法用来查询针对请求URI指定的资源支持的方法。

3. HTTP报文

用于HTTP协议交互的信息成为HTTP报文，分为请求报文和响应报文。HTTP报文分为报文首部和报文主体两块。

报文首部

服务器端或客户端需要处理的请求或响应的内容及属性。分为通用首部，请求首部，响应首部，实体首部。

报文主体

应被发送的数据。不一定会有。

3.1 通用首部

请求行信息

Request url 请求地址
Request Method 请求方法
Status Code 状态码
Remote Address ip地址
Referrer Policy: strict-origin-when-cross-origin (对于同源的请求，会发送完整的URL作为引用地址；在同等安全级别的情况下，发送文件的源作为引用地址(HTTPS->HTTPS)；在降级的情况下不发送此首部 (HTTPS->HTTP))

3.2 请求首部

请求报文信息

Accept（接收资源类型，image/gif; text/html）
Accept-Encoding 用户代理支持的内容编码以及编码的优先级。比如gzip，compress，deflate，identity(不压缩)。
Accept-Language 用户代理能够处理的语言集。
Accept-charset 用户代理支持的字符集，以及字符集的相对优先顺序。q值表示权重。
Cache-Control 缓存控制
Content-type 定义请求正文内容的类型application/x-www-form-urlencoded;application/json;charset=utf-8;Multipart/form-data
Connection
Host
Origin
Pragma: no-cache与Cache-Control: no-cache一致
Referer 告知服务器请求的原始资源的URI。
Authorization 告知服务器，用户代理的认证信息
User-Agent 用户代理
If-Modified-Since （对应服务端字段Last-Modified）告知服务器，若资源的更新时间在If-Modified-Since值之后，请求资源没有更新，则服务器返回状态码304 Not Modified。
If-None-Match （对应服务端字段Etag）客户端返回的If-None-Match字段值的实体标记Etag与请求资源的Etag是否一致，如果一致，则返回304的响应。

3.3 响应首部

Access-Control-Expose-Headers 暴露出来可供前端操作的header字段
cache-control 缓存控制
content-encoding
content-type 响应正文的内容类型
date 指创建HTTP报文的日期和时间
server
set-cookie expires,domain,HttpOnly（仅供传输）
strict-transport-security 告诉浏览器是否只能通过HTTPS访问当前资源, 禁止HTTP方式
x-frame-options 控制网站内容在其他web网站的Frame标签内的显示问题。可以防止点击劫持攻击。DENY值为不能被嵌入到iframe中。
X-XSS-Protection 1启用XSS过滤

3.4 响应状态码

1xx 提示信息
2xx 成功
3xx 重定向
4xx 客户端错误
5xx 服务器端错误

4 跨域

相同协议，相同域名，相同端口叫同源，否则是跨域。如果浏览器仅仅是访问资源，不会存在跨域问题，但是如果是读取元数据，就会受到浏览器CORS的限制，比如AJAX请求。

4.1 简单请求/非简单请求

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

请求方法是以下三种方法之一：HEAD，GET，POST

HTTP的头信息不超出以下几种字段：Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type: 只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

满足以上条件的为简单请求，否则为非简单请求（比如常见的自定义header字段，或是Content-Type:application/json等）。

非简单跨域请求在发送时，浏览器会增加一个options预检请求。大概流程如下：

浏览器发送一个post请求，请求头里添加过自定义字段
浏览器发现是个非简单请求，会先发一个options的预检请求(prefight request)
预检请求里浏览器会检查服务器端返回的response，如果response里添加过跨域字段，则预检请求通过
浏览器再发送真实的post请求

可以使用 Access-Control-Max-Age 设置预检请求的有效期。在这段时间内，同个请求的预检请求只会请求一次。

4.2 跨域头设置

Access-Control-Allow-Origin

值为 * 或是固定的域名，表示允许跨域请求的域名。

Access-Control-Allow-Credentials

值为 true/false，表示服务器是否接收Cookie。如果想要跨域传递cookie，设置如下：

客户端请求需要设置withCredentials: true，同意发送cookie。
服务端Access-Control-Allow-Credentials: true 同意接收cookie。
另外 Access-Control-Allow-Origin 必须是个指定的域名。

Access-Control-Allow-Headers

值为请求头里设置的自定义header字段。

// server
'Access-Control-Allow-Headers': 'Content-Type, system, version'

// client
{ 
    'Content-Type': 'application/json'， 
    'system': 'web', 
    'version': 'v1.0' 
}

Access-Control-Expose-Headers

一般前端只能读取resopnse body，如果想要读取自定义的response header信息，就需要服务端设置Access-Control-Expose-Headers字段，指定需要暴露出去的header字段，这样前端就可以通过JS来读取响应头里的header信息了。

// server 
Access-Control-Expose-Headers: 'system'

// client 
let system = response.headers.get('system');

Access-Control-Allow-Methods

跨来源的请求只接受三种类型GET、HEAD，POST。除此之外，如果是其它请求类型，则响应头里需要设置Access-Control-Allow-Methods: 'xxx'。

Access-Control-Max-Age

Access-Control-Max-Age 指定本次预检请求的有效期，单位是秒。

参考文章：

zhuanlan.zhihu.com/p/296670054

cloud.tencent.com/developer/a…

juejin.cn/post/694093…