前端跨域解决方案

1、jsonp
jsonp就是利用一个script标签获取回调函数的名称从而获取数据，通常这个script标签的src设置为：请求资源的地址+获取函数的字段名+回调函数名称，当然这都是需要与服务端商量好，以library.huruji3.com和blog.huruji3.com两个域为例，在一个域名的服务器端我设置了以下代码：

router.get('/jsonp',function(req,res,next){
   const callback = req.query.callback;
   res.send(callback + '("我是jsonp")')
});

于是在另一个域名的客户端，动态添加以下代码可以看到成功执行了在客户端定义的函数：

var script = document.createElement('script')
function con(name){
console.log(name)
}
script.type='text/javascript'
script.src='http://library.huruji3.com/api/jsonp?callback=con';
document.body.appendChild(script)

如图，

jsonp.png

2、postMessage
如我在一个域名下切入另一个域名的iframe，如下代码：

var blogWin = document.getElementById('blog').contentWindow;
        setInterval(function(){
            blogWin.postMessage('我是来自图书页面的消息', "*")
        },1000)

在另一个域名中监听这个事件，如下：

window.onmessage = function(e) {
    alert(e.data);
    console.log(e.data);
  }

打开图书页面，可以看到另一个域名下的事件被执行了，如下：

postMessage.png

3、利用document.domain
在两个需要通信的页面中设置为同一个域名，如下：

document.domain = 'huruji3.com';

在内嵌了另一个域名iframe的页面中此时就可以获取到iframe的document了，如下：

document.domain.png

4、利用window.name
设置另一个域名的window.name作为data，如下：

window.name = '1000px'

window.name.png