一、什么是跨域？
在前端领域，跨域意味着浏览器允许跨域请求发送到服务器，从而克服了Ajax只能从同一个来源使用的限制。
跨域时，您将收到以下错误
二、什么是同源策略？
同源策略是一种约定，由网景公司于1995年引入浏览器。它是浏览器的核心和基本安全功能。如果没有相应的策略，浏览器很容易受到XSS、CSFR和其他攻击。同源是指“协议+域名+端口”相同，即使两个不同的域名指向同一个ip地址，它们也不是同源的。
网址组成:
相应的策略限制以下行为:
无法读取Cookie、本地存储和索引数据库
DOM和JS对象不可用
无法发送AJAX请求
第三，解决方案
1.JSONP跨域
原理:标签没有跨域限制，标签src属性用于发送带有回调参数的GET请求。服务器将接口返回的数据拼凑到回调函数中，并将其返回给浏览器。浏览器解析并执行，这样前端就可以得到回调函数返回的数据。
缺点:只能发送一个请求来获取。
实现:
1)原生JS实现:
服务器返回如下:
jquery Ajax的实现:
Vue axios实现:
后端node.js代码:
2.跨域资源共享
CORS是W3C标准，全称是“跨域资源共享”。
它允许浏览器向跨源服务器发送XMLHttpRequest请求，从而克服了AJAX只能在同一个源中使用的限制。
CORS需要浏览器和服务器的支持。目前所有浏览器都支持该功能，IE浏览器不能低于IE10。
浏览器将CORS跨域请求分为简单请求和非简单请求。
只要同时满足这两个条件，就是一个简单的要求
使用以下方法之一:
头
得到
邮政
请求的海德尔是
接受
接受-语言
内容-语言
内容类型:限于三个值:应用程序/x-www-form-urlencoded、多部分/表单-数据、文本/纯文本
如果以上两个条件不同时满足，则属于非简单请求。浏览器区别对待这两种类型。
简单的请求
对于简单的请求，浏览器直接发出CORS请求。具体来说，一个“来源”字段被添加到标题信息中。
在上面的标题信息中，“来源”字段用于解释该请求来自哪个来源。基于该值，服务器决定是否批准该请求。
CORS跨域示例
本机ajax:
jquery ajax:
3.nginx代理跨域
Nginx agent是跨域的，本质上和CORS跨域原理是一样的。请求响应头的访问控制允许来源等字段由配置文件设置。
Nginx配置解决iconfont跨域问题
浏览器跨域访问js、css、img等常规静态资源被同源策略许可，但iconfont字体文件例外，此时可在nginx的静态资源服务器中加入以下配置。同源策略允许浏览器跨域访问js、css、img等常规静态资源，iconfont文件除外。此时，可以将以下配置添加到nginx的静态资源服务器。
Nginx反向代理接口跨域
跨域问题:同源策略只是浏览器的安全策略。服务器端只使用HTTP协议调用HTTP接口，没有同源策略，所以不存在跨域问题。
实现思路:通过Nginx，配置一台域名与domain1相同但端口不同的代理服务器作为跳板，反向代理访问domain2接口，顺便修改cookie中的域信息，方便当前域cookie的写入，实现跨域访问。
Nginx特定配置:
#代理服务器
服务器{4.nodejs中间件代理跨域
节点中间件实现跨域代理，原理与nginx大致相同，nginx通过启动代理服务器实现数据转发，也可以通过设置cookieDomainRewrite参数来修改响应头中cookie中的域名，从而实现当前域的cookie写入，方便界面登录认证。
使用node+express+http-proxy-中间件构建代理服务器。
前端代码:
中间件服务器代码:
5.document.domain+iframe跨域
只有当二级域名相同时，才能使用这种方法，例如，a.test.com和b.test.com适合使用这种方法。跨域只能通过在页面添加document.domain ='test.com '来实现，表示二级域名都一样。
实现原理:两个页面通过js强制设置基于document.domain的主域，从而实现同一个域。
示例:
6.location.hash+iframe跨域
实现原理:A想跨域与B通信，通过中间的页面c实现，在三个页面中，不同的域使用iframe的location.hash来传递值，同一个域通过直接js访问进行通信。
实现:a域:a.html-> b域:b.html-> a域:c.html。a和b的不同域只能通过哈希值单向通信，b和c的不同域只能单向通信，但是c和a在同一个域中，所以c可以通过parent.parent访问页面a上的所有对象..
7.window.name+iframe跨域
window.name属性的唯一性在于加载不同页面后名称值仍然存在，并且可以支持很长的名称值。
iframe的src属性从外域变为本地域，跨域数据通过window.name从外域传输到本地域。这巧妙地绕过了浏览器的跨域访问限制，但同时也是一种安全的操作。
中间代理页面，与a.html同域，内容为空。
8 .邮件跨域
邮件后
PostMessage是HTML5 XMLHttpRequest Level 2中的一个API，是少数可以跨域操作的窗口属性之一。它可以用来解决以下问题:
页面及其打开的新窗口的数据传输
多个窗口之间的消息传输
页面和嵌套iframe消息传递
以上三种情况下的跨域数据传输
其他窗口:对其他窗口的引用，例如iframe的contentWindow属性，通过执行window.open返回的窗口对象，或者命名的或数字索引的窗口..
消息:要发送到其他窗口的数据。
Targetorigin:通过窗口的origin属性指定哪些窗口可以接收消息事件。
传递:它是一系列可传递的对象，与消息同时传递。这些对象的所有权将转移给消息的接收者，发送者将不再保留所有权
9.WebSocket协议跨域
原理:本质上这个方法不使用HTTP的响应头，所以没有跨域限制。
WebSocket协议是一种新的HTML5协议。它实现了浏览器和服务器之间的全双工通信，允许跨域通信，是服务器推送技术的一个很好的实现。
在网络浏览器和服务器之间建立一个“套接字”连接。简单来说，客户端和服务器之间有一个持久的连接，双方可以随时开始发送数据。
前端代码:
后端代码:
10.浏览器打开跨域
其实跨域的问题是浏览器策略，源头是他，关掉这个功能
Windows操作系统
找到您安装的目录
。 Google Chrome Application Chrome . exe-disable-web-security-user-data-dir = xxxx
苹果个人计算机
~/下载/chrome-数据可以自定义。
第四，预防的相应策略是什么
跨域只存在于浏览器端。而浏览器提供了对网络的访问。我们在可用的浏览器中打开许多页面。这是一个如此开放的模式，我们需要限制它。例如，当森林很大时，有各种各样的鸟。我们需要一个统一的标准来达成协议，以确保这种安全性。
限制来自不同来源的请求，防止JavaScript代码对非同源页面进行各种请求
比如用户登录A网站，用新的标签打开B网站，B就可以像A网站一样发起任何请求，这会给不法分子可乘之机。
限制dom操作和从其他页面读取DOM元素
钓鱼网站
动词 摘要
jsonp适合加载不同域名的js、css，img等静态资源；Jsonp适合加载不同域名的js、css、img等静态资源；
CORS适合ajax跨域请求；
Nginx代理的跨域原理与nodejs中间件类似，就是搭建一个服务器，在服务器端直接请求HTTP接口，适用于前端和后端接口分离的前端项目。
Document.domain+iframe适用于主域名相同、子域不同的跨域请求。
PostMessage和websocket是HTML5的新特性，兼容性差，只适用于主流浏览器和IE10+。
参考
https://segmentfault.com/a/1190000022398875
https://juejin.cn/post/6844903882083024910
-结束-
