跨域概念：
跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。
同源策略：协议、端口、域名都必须一致!
同源策略如何保护用户数据安全？没有同源策略会怎么样？
同源策略对于js的限制有3点，我们一点一点来说。
-
（1） 无法用js读取非同源的Cookie、LocalStorage 和 IndexDB 无法读取。这条很好理解。
为了防止恶意网站通过js获取用户其他网站的cookie。 -
（2） 无法用js获取非同源的DOM 。
如果没有这一条，恶意网站可以通过iframe打开银行页面，可以获取dom就相当于可以获取整个银行页面的信息。 -
（3） 无法用js发送非同源的AJAX请求 。
具体详细网站 https://blog.csdn.net/hcrw01/article/details/84289109
引用部分理解：假设有一个黑客叫做小黑，他从网上抓取了一堆美女图做了一个网站，每日访问量爆表。
为了维护网站运行，小黑挂了一张收款码，觉得网站不错的可以适当资助一点，可是无奈伸手党太多，小黑的网站入不敷出。
于是他非常生气的在网页中写了一段js代码，使用ajax向淘宝发起登陆请求，因为很多数人都访问过淘宝，所以电脑中存有淘宝的cookie，不需要输入账号密码直接就自动登录了，然后小黑在ajax回调函数中解析了淘宝返回的数据，得到了很多人的隐私信息，转手一卖，小黑的网站终于盈利了。
如果跨域也可以发送AJAX请求的话，小黑就真的获取到了用户的隐私并成功获利了！！！
解决跨域的方法：
- jsonp跨域
原理： script标签没有跨域限制的漏洞实现的一种跨域方法，只支持get请求。安全问题会受到威胁。（重点考）
相关的代码：
function ajax(url, callback) {
let jsonp = document.createElement('script');
jsonp.type = 'text/javascript';
jsonp.src = ulr + '?callback=jsonpCallback'
let jsonpCallback = function(response) {
callback(response)
}
document.getElementsByTagName('head').appendChild(jsonp);
}
原理:
就是利用<script>标签没有跨域限制的“漏洞”（历史遗迹啊）来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址。
.优点
1.1 它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制，JSONP可以跨越同源策略；
1.2 它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持
1.3 在请求完毕后可以通过调用callback的方式回传结果。将回调方法的权限给了调用方。这个就相当于将controller层和view层终于分 开了。我提供的jsonp服务只提供纯服务的数据，至于提供服务以 后的页面渲染和后续view操作都由调用者来自己定义就好了。如果有两个页面需要渲染同一份数据，你们只需要有不同的渲染逻辑就可以了，逻辑都可以使用同 一个jsonp服务。
.缺点
2.1 它只支持GET请求而不支持POST等其它类型的HTTP请求
2.2 它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
2.3 jsonp在调用失败的时候不会返回各种HTTP状态码。
2.4 缺点是安全性。万一假如提供jsonp的服务存在页面注入漏洞，即它返回的javascript的内容被人控制的。那么结果是什么？所有调用这个 jsonp的网站都会存在漏洞。于是无法把危险控制在一个域名下…所以在使用jsonp的时候必须要保证使用的jsonp服务必须是安全可信的
其他跨域方法
-
cors跨域，通过后端服务器实现，Access-Control-Allow-Origin。
-
postMessage window的一个属性方法。
-
websocket
-
nginx反向代理
-
iframe跨域
如果对你有用，希望能得到你的点赞认可~非常感谢
