网络

#1 七层网络模型

物理层 -> 数据链路层 -> 传输层 -> 网络层 -> 会话层 -> 表示层 -> 应用层

#2 TCP 三次握手/四次挥手

https://juejin.cn/post/6915024149203288072?searchId=2025091516440820127E086D785F97DEC5

#3 应用层协议

URL

URL（uniform resource locator，统一资源定位符）用于定位网络服务

它表达了：

从网络中==哪台计算机（domain）==中的==哪个程序（port）==寻找==哪个服务（path）==，并注明了获取服务的==具体细节（path）==，以及要用什么样的==协议通信（schema）==

这里面包含了一些细节：

当协议是http端口为80时，端口可以省略
当协议是https端口为443时，端口可以省略
schema、domain、path是必填的，其他的根据具体的要求填写

#3 HTML

该协议规定了两个方面的内容：

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个广泛运用于互联网的应用层协议。

传递消息的模式
传递消息的格式

HTTP使用了一种极为简单的消息传递模式，**「请求-响应」**模式. 发起请求的称之为客户端，接收请求并完成响应的称之为服务器。「请求-响应」完成后，一次交互结束。

HTTP的消息格式是一种纯文本的格式，文本分为三个部分：

请求行
请求头

请求体

请求行

POST /api/user/login HTTP/1.1 类似格式:请求方法请求路径请求协议

请求头 - `Host`

Host标注了URL地址中的Domain + Port,例如:

Host: test.voidis.com

请求头 - `Content-Type`

Content-Type标注了附带的请求体是什么格式

响应码

响应码（状态码、消息码）是响应行中的一个数字，后面往往跟上一个对应的单词，用于表达服务器对这个响应的整体「态度」

常见的响应码有：

200 OK：一切正常。
301 Moved Permanently：资源已被永久重定向。

你的请求我收到了，但是，你要的东西不在这个地址了，我已经永远的把它移动到了一个新的地址，麻烦你取请求新的地址，地址我放到了响应头的Location中了
302 Found：资源已被临时重定向。常见于系统升级

你的请求我收到了，但是，你要的东西不在这个地址了，我临时的把它移动到了一个新的地址，麻烦你取请求新的地址，地址我放到了请求头的Location中了
304 Not Modified：文档内容未被修改。

你的请求我收到了，你要的东西跟之前是一样的，没有任何的变化，所以我就不给你结果了，你就用以前的吧。
400 Bad Request：语义有误，当前请求无法被服务器理解。

你给我发的我解析不了
403 Forbidden：服务器拒绝执行。

你的请求我已收到，但是我就是不给你东西
404 Not Found：资源不存在。

你的请求我收到了，但我没有你要的东西
500 Internal Server Error：服务器内部错误。

你的请求我已收到，但是我在执行过程中出现了问题,无法给你返回结果

响应头 - `Content-Type`

Content-Type标注了附带的响应体是什么格式

常见的值有：

text/plain: 普通的纯文本
text/html：html文档
text/javascript 或 application/javascript：js代码
text/css：css代码
image/jpeg：jpg图片
attachment：附件
其他MIME类型

#4 浏览器的通信能力

浏览器可以代替用户完成http请求，代替用户解析响应结果，所以我们称之为： 用户代理 user agent

在网络层面，必须要知道浏览器拥有的两大核心能力：

自动发出请求的能力
自动解析响应的能力

自动发出请求的能力

当一些事情发生的时候，浏览器会代替用户自动发出http请求，常见的包括：

用户在地址栏输入了一个url地址，并按下了回车

浏览器会自动解析URL，并发出一个GET请求，同时抛弃当前页面。
当用户点击了页面中的a元素

浏览器会拿到a元素的href地址，并发出一个GET请求，同时抛弃当前页面。
当用户点击了提交按钮<button type="submit">...</button>

浏览器会获取按钮所在的<form>元素，拿到它的action属性地址，同时拿到它method属性值，然后把表单中的数据组织到请求体中，发出指定方法的请求，同时抛弃当前页面。
当解析HTML时遇到了<link> <img> <script> <video> <audio>等元素

浏览器会拿到对应的地址，发出GET请求
当用户点击了刷新

浏览器会拿到当前页面的地址，以及当前页面的请求方法，重新发一次请求，同时抛弃当前页面。

自动解析响应的能力

浏览器不仅能发送请求，还能够针对服务器的各种响应结果做出不同的自动处理

常见的处理有：

识别响应码

浏览器能够自动识别响应码，当出现一些特殊的响应码时浏览器会自动完成处理，比如301、302
根据响应结果做不同的处理

浏览器能够自动分析响应头中的Content-Type，根据不同的值进行不同处理，比如：
- text/plain: 普通的纯文本，浏览器通常会将响应体原封不动的显示到页面上
- text/html：html文档，浏览器通常会将响应体作为页面进行渲染
- text/javascript或application/javascript：js代码，浏览器通常会使用JS执行引擎将它解析执行
- text/css：css代码，浏览器会将它视为样式
- image/jpeg：浏览器会将它视为jpg图片
- application/octet-stream：二进制数据，会触发浏览器下载功能
- attachment：附件，会触发下载功能
  
  该值和其他值不同，应放到Content-Disposition头中。

#5 跨域问题

同源策略是一套浏览器安全机制，当一个源的文档和脚本，与另一个源的资源进行通信时，同源策略就会对这个通信做出不同程度的限制。简单来说，同源策略对 同源资源 放行，对 异源资源 限制.因此限制造成的开发问题，称之为跨域（异源）问题

源(origin) = 协议 + 域名 + 端口

浏览器出于多方面的考量，制定了非常繁杂的规则来限制各种跨域请求，但总体的原则非常简单：

对标签发出的跨域请求轻微限制
对AJAX发出的跨域请求严厉限制

解决方案

CORS

CORS（Cross-Origin Resource Sharing）是最正统的跨域解决方案，同时也是浏览器推荐的解决方案。

CORS是一套规则，用于帮助浏览器判断是否校验通过。

CORS的基本理念是：

只要服务器明确表示允许，则校验通过
服务器明确拒绝或没有表示，则校验不通过

所以，使用CORS解决跨域，必须要保证服务器是「自己人」

请求分类

CORS将请求分为两类：==简单请求==和==预检请求==。

对不同种类的请求它的规则有所区别。

所以要理解CORS，首先要理解它是如何划分请求的。

简单请求

简单来说，只要全部满足下列条件，就是简单请求：

请求方法是GET、POST、HEAD之一
头部字段满足CORS安全规范，详见 W3C

浏览器默认自带的头部字段都是满足安全规范的，只要开发者不改动和新增头部，就不会打破此条规则
如果有Content-Type，必须是下列值中的一个
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded

预检请求(preflight)

只要不是简单请求，均为预检请求.预检请求会携带着请求头先发送一个options请求,然后根据返回的ACAO来判断是否要发送真实请求.

另外...

在跨域访问时，JS只能拿到一些最基本的响应头，如：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要访问其他头，则需要服务器设置本响应头。

Access-Control-Expose-Headers头让服务器把允许浏览器访问的头放入白名单，例如：
Access-Control-Expose-Headers: authorization, a, b
这样JS就能够访问指定的响应头了。

代理

CORS要求服务器是「自己人」,那如果不是呢？那就找一个中间人（代理）.

CORS方式:

NGINX代理方式:

网络