跨域概念：

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对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跨域