一、概念
跨域是指 从一个域名的网页去访问另一个域名的资源，只要协议、域名、端口有任何一个不同，就被当作是跨域。
这是有浏览器的 同源策略 造成的。所谓同源是指， 域名、协议、端口均相同。
同源策略限制一下几种行为：
1、Cookie、LocalStorage 和 IndexDB（浏览器本地数据库） 无法读取；
2、DOM 和 JS对象无法获取；
3、AJAX 请求不能发送
二、浏览器为什么限制跨域访问呢？
原因在于同源策略 是用来隔离潜在恶意文件的关键机制。如果缺少了同源策略，浏览器很容易受到XSS（跨域脚本攻击）和 CSRF（跨站请求伪造）的攻击。
三、跨域解决方案
1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
1、通过 JSONP 跨域
原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入（即用 Javascript 动态script，再请求一个带参网址实现跨域通信）。
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执行函数为onBack
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执行函数
function onBack(res) {
alert(JSON.stringify(res));
}
</script>
服务端返回数据：
onBack({"status": true, "user": "admin"})
JSONP的优缺点：
优点：
1、它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
2、它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
3、并且在请求完毕后可以通过调用callback的方式回传结果。
缺点：
1、只能实现 GET 一种请求；
2、只支持跨域HTTP请求这种情况。
注：在 html 中，拥有src属性的元素可以跨域访问资源，src 属性拥有跨域请求的特点。
通过src属性，img可以引用其它站点或图床的图片，大大降低本站的图片持久。
通过src属性，script可以引用CDN的JS文件，加速了浏览器的脚本文件的下载，跨域的数据获取更加高效和方便。
通过src属性，iframe可以嵌入其它站点的页面，可以让页面的框架和可变内容分离，内容引用较为灵活，方便引用其它站点。
不同的是：
使用 img标签 不能访问服务器返回的响应内容，只能单向的发送get请求。
使用 script标签 实现的jsonp跨域可以将服务器响应文本以函数参数的形式返回。
JSONP就是利用了script标签的跨域能力
2、通过 CORS（跨域资源共享）实现跨域
CORS 的基本思想就是使用自定义的 HTTP 头部 让浏览器与服务器进行沟通，决定请求或响应式是成功还是失败。
服务器对于CORS的支持，主要是通过设置 Access-Control-Allow-Origin 来进行的，如果浏览器检测到响应的设置，就允许 AJAX 进行跨域访问。
只需要在后台中加上响应头来允许域请求，在被请求的Response header中加入以下设置，就可以实现跨域访问。
//指定允许其他域名访问 'Access-Control-Allow-Origin:*'//或指定域 //响应类型 'Access-Control-Allow-Methods:GET,POST' //响应头设置 'Access-Control-Allow-Headers:x-requested-with,content-type'
参考博文：http://www.ruanyifeng.com/blog/2016/04/cors.html
3.通过 postMessage 实现跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：
1、 页面和其打开的新窗口的数据传递
2、 多窗口之间消息传递
3、 页面与嵌套的iframe消息传递
4、上面三个场景的跨域数据传递
用法：postMessage(data,origin)方法接受两个参数
data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
（1）a.html(http://www.domain1.com/a.html)
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
iframe.onload = function() {
var data = {
name: 'aym'
};
// 向domain2传送跨域数据
iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
};
// 接受domain2返回数据
window.addEventListener('message', function(e) {
alert('data from domain2 ---> ' + e.data);
}, false);
</script>
(2)、b.html(http://www.domain2.com/b.html)
<script>
// 接收domain1的数据
window.addEventListener('message', function(e) {
alert('data from domain1 ---> ' + e.data);
var data = JSON.parse(e.data);
if (data) {
data.number = 16;
// 处理后再发回domain1
window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
}
}, false);
</script>