首先我们先了解下什么是跨域

在不同域之间进行数据传输或通讯，只要协议、域名、端口有任何一个不同，就是跨域。

接下来我们介绍几种跨域的解决方法

1、jsonp

这个方法是我们在开发很常用的，jquery里的 $.getJSON就是利用的jsonp，$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，就会异步加载js文件的形式来调用jsono的回调函数。下面我们说下jsonp的实现过程。

在我们发送请求时，用XMLHttpRequest请求不用域上的数据是不可以的，但是我们可以发现，script标签可以跨域引用js，所以，jsonp就是用这个方法实现的。

<script>
    function dong(data){
		console.log(data)
    }
</script>
<script src='http://abc?callback=dong'>
</script>

我们可以看到，在src的地址后面有一个回调函数，这个回调函数指向我们自己的方法，当然参数callback不是固定的，要根据后台来定，所以，需要后台配合完成，需要后台接受这个回调函数，返回json数据。
原理就是利用script可以跨域的特性，在src链接后面加入自己定义指定的函数，服务会把我们需要的数据作为参数返回回来，这就是jsonp

2、document.domain+iframe

首先哦们了解下什么事浏览器同源策略限制。

1，不能通过ajax的方法去请求不同源中的文档。
2，浏览器中不同域的框架之间是不能进行js的交互操作的

使用这个方法必须是父子框架或者兄弟之间，然后让他们的相同的域。就是页面a里面用iframe嵌套页面b，他们是不同域，让他们域相同。这样

<script>
	// 两个页面都要有这个，指向同一个域，但是主域必须相同
    document.domain = 'dong.com'
</script>

然后，页面a就可以访问页面b里的对象和方法了

3、用window.name

window.name特性：在同一个窗口内，窗口内所有的页面都共享一个window.name，每个页面都有对window.name的读写权，同时，在同一窗口内，也不会因为页面的地址切换，和重新载入对window.name进行重置。

然后我们就可以利用这一点，我们先在页面a嵌入xxx页面（a和xxx是不同域的），在xxx页面把数据请求回来赋值wendow.name，然后在把xxx页面替换成和a同域下的页面b，就可以拿到window.name里的数据了

4、window.postMessage

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 *

// 页面a
<iframe src="http://dong.b.html" frameborder="0" onload="onLoad"></iframe>
<script>
    function onLoad(){
        var iframe = document.getElementById("b");
        // 获取window
        var win = iframe.contentWindow;
        // 设置postMessage  
        win.postMessage('我是信息','*')
    }
</script>

// 页面b

<script>
    window.onmessage = function(e){
     	e = e || event;
     	console.log(e.data)
    }
</script>

5、CORS（后端）

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。这个方法是后台的方法，我们只需要了解就行。