简单介绍几种前端跨域解决方案
什么是跨域？
简单来说，就是一个域下的文档或脚本试图去访问另一个域下的资源，这是广义的跨域。
什么是同源策略？
同源策略/SOP（same origin policy）是一种约定。他是浏览器最基本也是最核心的安全功能，如果缺少了同源策略，浏览器将会遭受XSS等攻击，所谓的同源策略就是协议、域名、端口号三者都相同。
跨域解决方案
1、通过 JSONP 跨域
2、document.domain + iframe 跨域
3、location.hash + iframe 跨域
4、window.name + iframe 跨域
5、nginx 代理跨域
6、通过 postMessage 跨域
7、跨域资源共享（CORS）
8、nodejs 中间件代理跨域
9、websocket 协议跨域
一、通过 JSONP 跨域
我们都知道 js 、css、img 等通过相应的标签可以访问加载其他域的资源，这是被浏览器所允许的。JSONP 就是通过动态创建一个 script 标签，在请求一个带参网址来进行跨域通信。
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
document.head.appendChild(script);
// 回调执行函数
function handleCallback(res){
console.log(res);
}
服务端返回如下（返回时即执行全局函数）：
handleCallback({"status": true, "user": "admin"})
jsonp缺点：只能实现get一种请求。
二、document.domain + iframe 跨域
这种情况只适用于主域相同，子域不同的跨域通信
实现原理：两个页面通过 js 强制设置 document.domain 为基础主域，就实现了同域
1、父窗口http://www.domain.com/a.html
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
document.domain = 'domain.com';
var user = 'admin';
</script>
2、子窗口http://child.domain.com/b.html
<script>
document.domain = 'domain.com';
// 获取父窗口中变量
console.log('get js data from parent ---> ' + window.parent.user);
</script>
三、window.name + iframe 跨域
window.name 属性的独特之处在于，name 值在不同页面（甚至不同域名）加载后仍然存在，并且可以支持非常长的 name 值（2M）。
1、a.html（http://www.domain1.com/a.html）
var proxy = function(url, callback){
var state = 0;
var iframe = document.createElement('iframe');
iframe.src = url;
iframe.onload = function(){
if(state === 1){
callback(iframe.contentWindow.name);
destoryIframe();
} else {
iframe.src = 'http://www.domain1.com/proxy.html';
state = 1;
}
}
document.body.appendChild(iframe);
// 获取数据以后销毁这个iframe，释放内存；这也保证了安全（不被其他域frame js访问）
function destoryIframe(){
iframe.contentWindow.document.write('');
iframe.contentWindow.close();
document.body.removeChild(iframe);
}
}
// 请求跨域b页面数据
proxy('http://www.domain2.com/b.html', function(data){
alert(data);
});
2、proxy.html (http://www.domain1.com/proxy.html)
中间代理页，与a.html同域，内容为空即可。
3、b.html (http://www.domain2.com/b.html)
window.name = "name=admin&password=dfad1212";
总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。
四、postMessage 跨域
postMessage 是HTML5 XMLHttpRequest Level 2 中的 api，是为数不多可以跨域操作的 window 属性之一，可以解决以下场景的问题：
1、页面和其打开的新窗口之间的数据传递
2、 多窗口之间的数据传递
3、页面和其嵌套的 iframe 之间的数据传递
4、以上各场景之间的数据传递
用法： postMessag(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 type="text/javascript">
var iframe = document.getElementById('iframe');
iframe.onload = function(){
var data = {name:'122'};
iframe.contentWindow.postMessage(JSON.Stringify(data), 'www.domain2.com');
}
window.addEventListener('message', function(e){
console.log(JSON.parse(e.data));
},false)
</script>
2、b.html (http://www.domain2.com/b.html)
// 接收domain1的数据
window.addEventListener('message', function(e){
console.log(JSON.parse(e.data));
var data = JSON.parse(e.data);
if(data){
data.age = 12;
// 处理后再发回domain1
window.parent.postMessage(JSON.Stringify(data), 'www.domain1.com')
}
},false)
五、nginx 代理跨域
nginx反向代理接口跨域
跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。
#proxy服务器
server {
listen 81;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为*
add_header Access-Control-Allow-Credentials true;
}
}
这里就简单介绍其中的几种，其他的可以自行了解