跨域的几种实现方法

跨域就是实现不同域的接口进行数据交互。

一、jsonp

html中script标签可以引入其他域下的js，比如引入线上的jquery库。利用这个特性，可实现跨域访问接口，不过需要后端支持。

web页面中，通过script标签获取js代码可以进行跨域，我们可以动态的创建script标签，设置src属性指向我们请求资源的url地址，然后放到head标签中。这样就可以把不同域的数据加载到本域名下，不过需要后端支持jsonp，也就是通过前端的url中的callback参数动态的生成回调函数名，通过传参的形式执行获取到的数据，这样的话，前端预定义好的函数就可以让传来的数据自动运行。

介绍跨域方式之前，我们先来修改本机的hosts文件如下:

127.0.0.1       localhost
127.0.0.1       test.com
127.0.0.1       a.test.com
127.0.0.1       b.test.com

这样本地地址就对应了不同的域。

JSONP的跨域方式是利用

A页面:

    
使用降域实现跨域
    

        
    
    

通过a.test.com/a.html访问b.test.com/b.html，实现了跨域访问，效果如下:

四、postMessage

window.postMessage()是HTML5的新方法，IE8+支持。可以使用它来向其它的window对象发送数据，无论这个window对象是属于同源或不同源。

postMessage(data, origin)方法接收两个参数：

1. data:要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2. origin: 字符串参数。用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符*，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

同样以上面的例子来说明postMessage()的原理（A页面中嵌套了一个B页面）
那么我们可以在A页面中通过postMessage()方法向跨域的B页面传递数据

    
使用降域实现跨域
    

        
    
    

那么，我们怎么在B页面上接收A页面传递过来的数据呢，我们只要在B页面监听window的message事件就可以，消息内容储存在该事件对象的data属性中。

同样，如果想要在B页面发送数据，A页面接受数据，只要在B页面使用postMessage()方法，然后在A页面监听window的message事件即可。

最终页面得到的效果如下:

参考