涨知识：前端跨域

浏览器出于安全考虑，有同源策略，也就是说如果协议、域名、端口有一个不同请求就会失败

1、JSONP

原理就是利用script标签没有同源策略限制的漏洞，通过script标签的src属性指向需要请求的地址，并指定一个回调函数来处理数据

<script src="http://domain/api?param1=a&param2=b&callback=jsonp"></script>

<script>

functionjsonp(data){console.log(data)}

</script>

优点是使用简单并且兼容性好，缺点是只允许个get请求

2、CORS

需要前端和服务端共同来实现，浏览器会自动进行CORS通信，服务端需要在响应头中设置Access-Control-Allow-Origin为允许访问的域名，如果是通配符的话则表示所有网站都可以访问

3、document.domain

该方法只允许二级域名相同的网站进行访问。例如a.test.com和b.test.com

在页面文件中写入document.domain="test.com"就行，表示二级域名都相同就可以实现跨域

4、postMessage

该方法用于在页面中访问嵌入的第三方页面的数据，一个页面发送消息，另一个页面接收消息

//发送消息端

window.parent.postMessage('message','http://www.a.com')

//接收消息端

var mc=new MessageChannel()

mc.addEventListener('message',event->{

var origin=event.origin

if(origin == 'http://www.a.com'){

console.log("验证通过！")

}

})