相信每一个前端er对付跨域这两个字都不会陌生，在实际项目中运用也是比较多的。但跨域方法的多种多样实在让人目不暇接。老规矩，碰到这种情形，就只能自己总结一篇博客，作为记录。
正文
1. 什么是跨域？
跨域一词从字面意思看，便是跨域名嘛，但实际上跨域的范围不止那么狭隘。详细观点如下：只要协议、域名、端口有任何一个不同，都被当作是不同的域。之以是会产生跨域这个问题呢，实在也很随意马虎想明白，假如随便引用外部文件，不同标签下的页面引用类似的彼此的文件，浏览器很随意马虎懵逼的，安全也得不到保障了就。什么事，都是安全第一嘛。但在安全限定的同时也给注入iframe或是ajax运用上带来了不少麻烦。以是我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象（iframe之间）。下面是详细的跨域情形详解：
URL 解释 是否许可通信
http://www.a.com/a.js
http://www.a.com/b.js 同一域名下 许可
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同一域名下不同文件夹 许可
http://www.a.com:8000/a.js
http://www.a.com/b.js 同一域名，不同端口 不许可
http://www.a.com/a.js
https://www.a.com/b.js 同一域名，不同协议 不许可
http://www.a.com/a.js
http://70.32.92.74/b.js 域名和域名对应ip 不许可
http://www.a.com/a.js
http://script.a.com/b.js 主域相同，子域不同 不许可（cookie这种情形下也不许可访问）
http://www.a.com/a.js
http://a.com/b.js 同一域名，不同二级域名（同上） 不许可（cookie这种情形下也不许可访问）
http://www.cnblogs.com/a.js
http://www.a.com/b.js 不同域名 不许可
这里我们须要把稳两点:
如果是协议和端口造成的跨域问题“前台”是无能为力的；
在跨域问题上，域仅仅是通过“URL的首部”来识别而不会去考试测验判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
(“URL的首部”指window.location.protocol +window.location.host，也可以理解为“Domains, protocols and ports must match”。)
2. 通过document.domain跨域
前面说过了，浏览器有一个同源策略，其限定之一是不能通过ajax的方法去要求不同源中的文档。 第二个限定是浏览器中不同域的框架之间是不能进行js的交互操作的。不同的框架之间是可以获取window工具的，但却无法获取相应的属性和方法。比如，有一个页面，它的地址是http://www.damonare.cn/a.html ， 在这个页面里面有一个iframe，它的src是http://damonare.cn/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，以是我们是无法通过在页面中书写js代码来获取iframe中的东西的：
<script type=\"大众text/Javascript\"大众>
function test(){
var iframe = document.getElementById('ifame');
var win = document.contentWindow;//可以获取到iframe里的window工具，但该window工具的属性和方法险些是不可用的
var doc = win.document;//这里获取不到iframe里的document工具
var name = win.name;//这里同样获取不到window工具的name属性
}
</script>
<iframe id = \"大众iframe\"大众 src=\"大众http://damonare.cn/b.html\公众 onload = \"大众test()\"大众></iframe>
这个时候，document.domain就可以派上用场了，我们只要把http://www.damonare.cn/a.html和http://damonare.cn/b.html这两个页面的document.domain都设成相同的域名就可以了。但要把稳的是，document.domain的设置是有限定的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。
在页面http://www.damonare.cn/a.html 中设置
document.domain:
<iframe id = \"大众iframe\"大众 src=\"大众http://damonare.cn/b.html\公众 onload = \公众test()\"大众></iframe>
<script type=\"大众text/javascript\"大众>
document.domain = 'damonare.cn';//设置成主域
function test(){
alert(document.getElementById('iframe').contentWindow);//contentWindow 可取得子窗口的 window 工具
}
</script>
在页面http://damonare.cn/b.html 中也设置document.domain:
<script type=\"大众text/javascript\"大众>
document.domain = 'damonare.cn';//在iframe载入这个页面也设置document.domain，使之与主页面的document.domain相同
</script>
修正document.domain的方法只适用于不同子域的框架间的交互。
3. 通过location.hash跨域
由于父窗口可以对iframe进行URL读写，iframe也可以读写父窗口的URL，URL有一部分被称为hash，便是#号及其后面的字符，它一样平常用于浏览器锚点定位，Server端并不关心这部分，该当说HTTP要求过程中不会携带hash，以是这部分的修正不会产生HTTP要求，但是会产生浏览器历史记录。此方法的事理便是改变URL的hash部分来进行双向通信。每个window通过改变其他 window的location来发送（由于两个页面不在同一个域下IE、Chrome不许可修正parent.location.hash的值，以是要借助于父窗口域名下的一个代理iframe），并通过监听自己的URL的变革来吸收。这个办法的通信会造成一些不必要的浏览器历史记录，而且有些浏览器不支持onhashchange事宜，须要轮询来获知URL的改变，末了，这样做也存在缺陷，诸如数据直接暴露在了url中，数据容量和类型都有限等。下面举例解释：
如果父页面是baidu.com/a.html,iframe嵌入的页面为google.com/b.html（此处省略了域名等url属性），要实现此两个页面间的通信可以通过以下方法。
a.html传送数据到b.html
a.html下修正iframe的src为google.com/b.html#paco
b.html监听到url发生变革，触发相应操作
b.html传送数据到a.html，由于两个页面不在同一个域下IE、Chrome不许可修正parent.location.hash的值，以是要借助于父窗口域名下的一个代理iframe
b.html下创建一个隐蔽的iframe，此iframe的src是baidu.com域下的，并挂上要传送的hash数据，如src=”http://www.baidu.com/proxy.html#data”
proxy.html监听到url发生变革，修正a.html的url（由于a.html和proxy.html同域，以是proxy.html可修正a.html的url hash）
a.html监听到url发生变革，触发相应操作
b.html页面的关键代码如下:
try {
parent.location.hash = 'data';
} catch (e) {
// ie、chrome的安全机制无法修正parent.location.hash，
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = \公众http://www.baidu.com/proxy.html#data\公众;
document.body.appendChild(ifrproxy);
}
proxy.html页面的关键代码如下 :
//由于parent.parent（即baidu.com/a.html）和baidu.com/proxy.html属于同一个域，以是可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);
4. 通过HTML5的postMessage方法跨域
高等浏览器Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。这个功能紧张包括接管信息的”message”事宜和发送的”postMessage”方法。比如damonare.cn域的A页面通过iframe嵌入了一个google.com域的B页面，可以通过以下方法实现A和B的通信
A页面通过postMessage方法发送：
window.onload = function() {
var ifr = document.getElementById('ifr');
var targetOrigin = \公众http://www.google.com\公众;
ifr.contentWindow.postMessage('hello world!', targetOrigin);
};
postMessage的利用方法：
otherWindow.postMessage(message, targetOrigin);
otherWindow:指目标窗口，也便是给哪个window发，是 window.frames 属性的成员或者由 window.open 方法创建的窗口
message: 是要发送的，类型为 String、Object (IE8、9 不支持)
targetOrigin: 是限定吸收范围，不限定请利用 ‘
B页面通过message事宜监听并接管:
var onmessage = function (event) {
var data = event.data;//
var origin = event.origin;//来源地址
var source = event.source;//源Window工具
if(origin==\公众http://www.baidu.com\"大众){
console.log(data);//hello world!
}
};
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
//for ie
window.attachEvent('onmessage', onmessage);
}
同理，也可以B页面发送，然后A页面监听并接管。
5.通过jsonp跨域
刚才说的这几种都是双向通信的，即两个iframe，页面与iframe或是页面与页面之间的，下面说几种单项跨域的（一样平常用来获取数据），由于通过script标签引入的js是不受同源策略的限定的。以是我们可以通过script标签引入一个js或者是一个其他后缀形式（如php，jsp等）的文件，此文件返回一个js函数的调用。
比如，有个a.html页面，它里面的代码须要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://damonare.cn/data.php,那么a.html中的代码就可以这样：
<script type=\公众text/javascript\"大众>
function dosomething(jsondata){
//处理得到的json数据
}
</script>
<script src=\"大众http://example.com/data.php?callback=dosomething\"大众></script>
我们看到获取数据的地址后面还有一个callback参数，按老例是用这个参数名，但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能掌握的，就得按照供应数据的那一方的规定格式来操作了。
由于是当做一个js文件来引入的，以是http://damonare.cn/data.php返回的必须是一个能实行的js文件，以是这个页面的php代码可能是这样的(一定要和后端约定好哦):
<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>
终极，输出结果为：dosomething([‘a’,’b’,’c’]);
如果你的页面利用jquery，那么通过它封装的方法就能很方便的来进行jsonp操作了。
<script type=\公众text/javascript\"大众>
$.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
//处理得到的json数据
});
</script>
jquery会自动天生一个全局函数来更换callback=?中的问号，之后获取到数据后又会自动销毁，实际上便是起一个临时代理函数的浸染。$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数。
JSONP的优缺陷
JSONP的优点是：它不像XMLHttpRequest工具实现的Ajax要求那样受到同源策略的限定；它的兼容性更好，在更加古老的浏览器中都可以运行，不须要XMLHttpRequest或ActiveX的支持；并且在要求完毕后可以通过调用callback的办法回传结果。
JSONP的缺陷则是：它只支持GET要求而不支持POST等其它类型的HTTP要求；它只支持跨域HTTP要求这种情形，不能办理不同域的两个页面之间如何进行JavaScript调用的问题。
6. 通过CORS跨域
CORS（Cross-Origin Resource Sharing）跨域资源共享，定义了必须在访问跨域资源时，浏览器与做事器该当如何沟通。CORS背后的基本思想便是利用自定义的HTTP头部让浏览器与做事器进行沟通，从而决定要求或相应是该当成功还是失落败。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。全体CORS通信过程，都是浏览器自动完成，不须要用户参与。对付开拓者来说，CORS通信与同源的AJAX通信没有差别，代码完备一样。浏览器一旦创造AJAX要求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的要求，但用户不会有觉得。
因此，实现CORS通信的关键是做事器。只要做事器实现了CORS接口，就可以跨源通信。
平时的ajax要求可能是这样的:
<script type=\"大众text/javascript\"大众>
var xhr = new XMLHttpRequest();
xhr.open(\"大众POST\"大众, \公众/damonare\"大众,true);
xhr.send();
</script>
以上damonare部分是相对路径，如果我们要利用CORS，干系Ajax代码可能如下所示：
<script type=\公众text/javascript\公众>
var xhr = new XMLHttpRequest();
xhr.open(\"大众GET\公众, \"大众http://segmentfault.com/u/trigkit4/\公众,true);
xhr.send();
</script>
代码与之前的差异就在于相对路径换成了其他域的路径，也便是你要跨域访问的接口地址。
做事器端对付CORS的支持，紧张便是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以许可Ajax进行跨域的访问。关于CORS更多理解可以看下阮一峰老师的这一篇文章：跨域资源共享 CORS 详解
CORS和JSONP比拟
JSONP只能实现GET要求，而CORS支持所有类型的HTTP要求。
利用CORS，开拓者可以利用普通的XMLHttpRequest发起要乞降得到数据，比起JSONP有更好的缺点处理。
JSONP紧张被老的浏览器支持，它们每每不支持CORS，而绝大多数当代浏览器都已经支持了CORS）。
CORS与JSONP比较，无疑更为前辈、方便和可靠。
7. 通过window.name跨域
window工具有个name属性，该属性有个特色：即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
比如：我们在任意一个页面输入
window.name = \"大众My window's name\"大众;
setTimeout(function(){
window.location.href = \公众http://damonare.cn/\"大众;
},1000)
进入damonare.cn页面后我们再检测再检测 window.name :
window.name; // My window's name
可以看到，如果在一个标签里面跳转网页的话，我们的 window.name 是不会改变的。
基于这个思想，我们可以在某个页面设置好 window.name 的值，然后跳转到其余一个页面。在这个页面中就可以获取到我们刚刚设置的 window.name 了。
由于安全缘故原由，浏览器始终会保持 window.name 是string 类型。
同样这个方法也可以运用到和iframe的交互来：
比如：我的页面(http://damonare.cn/index.html)中内嵌了一个iframe：
<iframe id=\公众iframe\"大众 src=\"大众http://www.google.com/iframe.html\公众></iframe>
在 iframe.html 中设置好了 window.name 为我们要通报的字符串。
我们在 index.html 中写了下面的代码：
var iframe = document.getElementById('iframe');
var data = '';
iframe.onload = function() {
data = iframe.contentWindow.name;
};
Boom!报错！
肯定的，由于两个页面不同源嘛，想要办理这个问题可以这样干：
var iframe = document.getElementById('iframe');
var data = '';
iframe.onload = function() {
iframe.onload = function(){
data = iframe.contentWindow.name;
}
iframe.src = 'about:blank';
};
或者将里面的 about:blank 更换成某个同源页面（about:blank，javascript: 和 data: 中的内容，继续了载入他们的页面的源。）
这种方法与 document.domain 方法比较，放宽了域名后缀要相同的限定，可以从任意页面获取 string 类型的数据。
后记
其它诸如中间件跨域，做事器代理跨域，Flash URLLoader跨域，动态创建script标签（简化版本的jsonp）不作谈论。
