禹神：一小时彻底搞懂跨域&解决方案_哔哩哔哩_bilibili该直播回放对跨域的多种解决方案进行了梳理，内容包括：分析同源策略、分析预检请求、跨域的多种解决方案（CORS、JSONP、代理）、同时也从后端人员角度梳理了各种必备的响应头，无论你是前端还是后端，都能让你彻底搞懂跨域。, 视频播放量 22132、弹幕量 73、点赞数 991、投硬币枚数 531、收藏人数 2399、转发人数 112, 视频作者 尚硅谷, 作者简介 就业规划、简历模板、毕业设计，加小谷姐姐Q：3276742687，相关视频：禹神：一小时快速上手Electron，前端Electron开发教程，一小时速通JavaScript模块化，涵盖CommonJS与ES6模块化，禹神：前端项目部署指南，前端项目打包上线，尤雨溪谈为什么要出国，你还在手写CSS效果？，天才乔布斯，一语道破计算机的本质，尚硅谷禹神分享CSS技术专题（直播回放），当我看到有人使用github桌面，尚硅谷《计算机组成原理》计算机408考研、考试不挂+考研拿下！计组，逃避可耻但有用！前端已退坑~
https://www.bilibili.com/video/BV1pT421k7yz/?spm_id_from=333.1007.top_right_bar_window_history.content.click
同源策略概述
（1）浏览器的同源策略：
浏览器为确保资源安全，而遵循的一种策略。
1.1 什么是源？
（不看路径）
1.2 同源与非同源
1.3 同源请求与非同源请求
[所处源』与『目标源』不一致，就是『非同源」又称「异源』或『跨域』
（2）浏览器会对跨域做出哪些限制?
例如: [源A] 和 [源B] ，它们是 [非同源] 的，则浏览器会有如下限制：
①DOM 访问限制:
[源A] 的脚本不能读取和操作 [源B] 的DOM
这么写就触发跨越了，拿不到iframe的document
② Cookie 访问限制:
[源A] 不能访问 [源B] 的cookie。
③Ajax 响应数据限制:
[源A] 可以给 [源B] 发请求，但是无法获取 [源B] 响应的数据。
浏览器对 Ajax 获取数据的限制是影响最大的一个，且实际开发中经常遇到。
注意：
1.跨域限制仅存在浏览器端，服务端不存在跨域限制。
2.即使跨域了，Ajax 请求也可以正常发出，但响应数据不会交给开发者
3.<link>、<script>、<img>…… 这些标签发出的请求也可能跨域，只不过浏览器对标签跨域不做严格限制（CSP），对开发几乎无影响。
CORS 解决 Ajax 跨域问题
（1）CORS 概述
CORS 全称:Cross-Origin Resource Sharing(跨城资源共享)，是用于控制 浏览器校验 跨域请求的一套规范，服务器依照 CORS 规范，添加特定 响应头 来控制浏览器校验，大致规则如下:
- 服务器明确表示 拒绝跨域 请求，或没有表示，则浏览器校验不通过。
- 服务器明确表示 允许跨域 请求，则浏览器校验通过。
使用 CORS 解决跨域是最正统的方式，且要求服务器是“自己人“
（2）CORS 解决跨域
（1）简单请求与复杂请求：
CORS 会把请求分为两类，分别是: ① 简单请求、②复杂请求
关于预检请求 perflight:
- 发送时机：预检请求在实际跨域请求之前发出，是由浏览器自动发起的。
- 主要作用：用于向服务器确认是否允许接下来的跨域请求。
- 基本流程：先发起 OPTIONS 请求，如果通过预检，继续发起实际的跨域请求。
- 请求头内容：一个OPTIONS 预检请求，通常会包含如下请求头：
（2）简单请求解决方法：
整体思路: 服务器在给出响应时，通过添加 Access-Control-Allow-Origin 响应头，来明确表达允许某个源发起跨域请求，随后浏览器在校验时，直接通过。
因此需要 express 配置 Access-Control-Allow-Origin ：
（3）复杂请求解决方法：
①服务器先通过浏览器的预检请求，服务器需要返回如下响应头：
②处理实际的跨域请求(与处理简单请求跨域的方式相同)
（4）借助 cors 库快速完成配置：
上述的配置中需要自己配置响应头，或者需要自己手动封装中间件，借助cors 库，可以更方便完成配置
JSONP 解决跨域问题
（1）概述
1.1 JSONP 概述:
JSONP 是利用了<script>标签可以跨域加载脚本，且不受严格限制的特性，可以说是程序员智慧的结晶，早期一些浏览器不支持 CORS 时，可以靠 JSONP 解决跨域（但是只能解决get请求）。
1.2 基本流程:
- 客户端创建一个<script>标签，并将其 src 属性设置为包含跨域请求的 URL，同时准备一个回调函数，这个回调函数用于处理返回的数据。
- 服务端接收到请求后，将数据封装在回调函数中并返回。
- 客户端的回调函数被调用，数据以参数的形势传入回调函数
（2）配置代理解决跨域：
（3）jQuery封装的JSONP：
配置代理解决跨域
（1）自己配置代理服务区
借助 http-proxy-middleware 配置代理
允许跨域并去掉api（通过代理服务器发送，因为服务器与服务器之间没有跨域限制）
