前端网络技术提升

柔光的暖阳◎ 2023-01-22 14:50 39阅读 0赞

# 3次握手，4次挥手 #

在讲三次握手和四次挥手之前，我们要了解一个东西

首先，我们网络请求的过程中，我们网络请求的发送方和接收方，之间的通讯，应该是没有障碍的

通信的过程，如果想要建立稳定的链接的条件：通信双方都要有接收信息和发送信息的能力

客户端需要明确 ： 服务器端要有接收信息的能力 以及给予回应的能力

服务器端需要明确：客户端需要有接受信息和 发送信息的能力

所以我们的三次握手，主要就是为了建立一个稳定的连接

那么我们来思考一下，为什么要三次握手才能证明建立稳定的连接呢？

> 假设，我们 把客户端 和 服务器端 比作 A 和 B  
> 第一次握手： A —> B 建立连接的请求 （A给B发送信息我要向你发送信息了，你能接受到吗？）  
> B能知道A可以发送信息

> 第二次握手： B —> A 给出建立连接的响应 （B给A发送信息 我接受到你建立请求的信息了， 我可以接收到你的信息）  
> A 能知道 B可以接收和发送信息

> 第三次握手： A —> B 给出回馈 （A给B 发送信息： 我知道你可以收到我的请求了，接下来我要发送数据了）  
> B 能确定 A 可以接收到信息

> 四次挥手，为了 客户端 断开 与服务器的连接  
> A（客户端） B（服务器端）

> 第一次挥手： A ----> B 发出断开连接的请求（我的问题内容已经发送完了，我要断开连接了）  
> B能明确A的信息已经全部发送完毕了 A要断开连接啦

> 第二次挥手: B ----> A 发出断开连接的回应（我知道你要断开了，但是你的答案我还没给你传完呢）  
> A能明确B已经接收到我的断开连接的请求了，但是他还没把所有的答案给到我

> 第三次挥手： B ----> A 发出断开连接的信息 （我的答案已经都给你了，我这边可以断开了）  
> A能明确B已经发完了 可以断开了

> 第四次挥手： A ----> B 发出断开的连接的确认信息（我知道你已经发完了，我现在断开了）

# 跨域问题 #

我们先来看一下什么是跨域

首先 对于一个 域

比如  
 https://www.baidu.com  
 分为 协议（http or https）  
 域名 （www.baidu.com）  
 端口号 ： (https 的 默认端口号是 443 如果协议是 http 的话 默认的端口号是 80)

我们又管这个 域叫做 源

我们的浏览器有一个安全机制 叫做 **同源策略**

浏览器约定 同源下面的地址之间 是可以进行通信的  
而我们的跨域就是 协议 域名 端口号 有一个不同 我们就是说其跨域

再来举一个例子 我们所知 一个 IP 地址 对应一个域名  
例如 我们的本地的 一个域名

> https://localhost:8080/  
> 和我们 用 ip 地址 所写的  
> https://127.0.0.1:8080/  
> 其实是一个东西 但是 这两个 并不同源  
> 因为这两个的 域名是 不相同的  
> 是 直接比较字符串的

浏览器不会对比 域名解析之后的 ip 而是 直接比较 域名的

## 遇到跨域 我们的处理方式： ##

### 客户端与服务器端的跨域 ###

#### JSONP ####

进行网络请求除了我们经常使用的 ajax 我们还能通过其他的方式

比如我们调用 jQuery的 cdn 可以通过 script 的src 属性 来进行网络请求的

所以我们 在 （script）上的 src 是 不受同源限制的影响的  
  同时 如果我们script 标签 引入的 src 的文件是一个 txt 那么 我们script 执行的时候 , 实际上是 把 src 的资源的字符串 放到了 script 标签内 然后进行JavaScript 运行

也就是说 我们拿用 script src 引入的时候 引入的资源的字符串 全部当作 JavaScript 脚本来运行

需要后台拼接包裹层

限制：

> a. 请求方式 只能是 GET  
> b. 请求数据的大小有限制  
> c. 对于 cookie 没有限制 安全性不是特别高

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]

我们想要拿到index.txt里面的字符串数据 我们应该如何进行操作

这个时候 我们就可以使用 JSONP ，我们可以给 数据 添加上一个 包裹层  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]

W3C 并没有 将 JSONP 作为一种规范

#### CORS： ####

全称 ：cross origin resource sharing （跨域资源共享）  
是 W3C 标准中提出的

服务器端 需要添加一些 响应信息 （添加响应头）

将 请求分成 两类 ： 简单请求 ， 非简单请求

简单请求 ：  
满足的条件：

1.  请求方式 只能 为 GET POST HEAD
2.  请求头字段  
      Accept  
      Accept/language  
      language  
      Content-Type 的值只能是 后 三个 之一  
       application/x-www-form-urlencoded  
       multipart/form-data，text/plain  
       Last-Event-ID  
      对于 简单请求的 CORS 跨域 需要添加的相应头为  
      Access-Control-Allow-Origin： "*" (* 表示 所有的 源 都可以 访问) (允许访问相应数据的源)

Access-Control-Allow-Credentials : “” 是否允许 携带cookie true 表示 允许携带 (可选项) 同时 我们 在 ajax 函数内 我们也要设置一个

xhr.withCredentials = true 表示 这个 网络请求 可以携带cookie

Access-Control-Expose-Headers : “” 允许前端 拿到的相应头字段 是一个字符串 （可选项）

非简单请求：

不满足 简单请求条件的 请求

请求方式 不为 GET POST HEAD

Access-Control-Allow-Origin： “”  
  Access-Control-Allow-Methods : “” 允许拿到数据的请求方式

不满足 第二个条件  
  Access-Control-Allow-Headers: “” 允许拿到数据的请求中，允许包含的请求头字段

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70]: /images/20221020/9eb51fbc22f8496c9a6f5a1e48cf5450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlb3dhaGFoYQ_size_16_color_FFFFFF_t_70 1]: /images/20221020/38308cda0b004889a6ba57bbf23078ca.png