最后更新于 2016-08-10 15:18:00
为了用户的安全，浏览器通常都会限制跨域（Cross-domain）访问，也就是默认不允许不同域名下页面之间进行资源的传递和信息交互，但很多时候我们又有跨域请求资源的需求。
同源策略
我们要在地址栏中正确输入“协议”、“域名”、“端口”、“文件路径”才能访问一个页面，其中任意一个不正确就不会达到我们期望的结果。所谓的跨域就是当协议、域名、端口这三者有一个不同时即称为跨域访问，这时候浏览器为了用户安全就会限制 JavaScript 的跨域行为，这也叫做同源策略（由网景公司提出）。
通常一个公司（组织、团队）会申请一个主域名，然后根据服务类型分出多个二级域名，在某些涉及到敏感信息的页面又会采用 HTTPS 协议加密，或许还有更多的类似需求，这些需求大多都需要跨域共享资源才能实现用户的定制服务。所以，跨域访问不是个能避免的问题，在不破坏浏览器安全性的前提下我们需要去解决它。
实现跨域访问
我们的跨域访问需求是多样化的，因此解决方法也是多样化的，下面就介绍一些常用的方法。
响应头标识
随着 Ajax 技术的大量使用，Ajax 跨域请求的需求日益增多，我们可以在服务器端很简单的解决这个问题，即在相应文件中添加响应头标识。
// 在服务器端的文件中加上以下响应头（允许所有域名跨域访问该资源）
header('Access-Control-Allow-Origin: *');
// 只允许指定的域名跨域访问该资源
header('Access-Control-Allow-Origin: http://www.163.com');
如果要指定多个域名，相互之间用逗号隔开就可以了。
jsonp
json 是一种很简单的数据格式，鉴于它的简单性以及 script 标签可跨域的特性，我们采用 jsonp 的方式跨域访问资源。
客户端代码
<script>
// 在全局创建一个回调函数（result 参数为跨域访问到的资源）
function callback(result){
...
// 在这里处理跨域访问到的资源（也可以保存在全局变量中）
...
// 最后销毁全局的回调函数
window.callback = null;
// 移除动态创建的 script
document.body.removeChild(document.getElementById('nScript'));
}
// 自执行，避免污染全局空间
(function(){
// 动态创建 script 插入DOM树，实现跨域访问资源
var nScript = document.createElement('script');
nScript.id = "nScript";
nScript.src = "http://www.163.com/info.php?call=callback";
document.body.appendChild(nScript);
})(window);
</script>
注意这个回调函数必须在全局空间内，否则无法被新创建的 <script> 标签调用，该回调函数是在新创建的 script 标签的 src 属性值中以参数方式发送给服务器端的。该函数执行完毕后，我们也可以自己销毁它，避免污染全局空间；当然，如果我们给动态创建的 script 标签指定一个 id 的话，我们也可以移除该 script 元素。
服务器端代码
<?php
header('Content-type: application/json');
// 获取回调方法名(注意与客户端参数名对应)
$call = htmlspecialchars($_GET['call']);
// 要返回的 json 格式数据
$data = "['Name','Sex','Age']";
echo $call."({$data})";
?>
事实上，所谓的 jsonp 就是通过客户端将回调函数名发送给服务器端，服务器端再把要返回的 json 数据当作参数与方法名拼接成一段 JavaScript 代码返回给客户端，客户端执行得到的 js 代码表达式（调用回调方法）就实现了跨域访问资源。
window.name
在浏览器中只要处于同一个窗口下，无论页面如何跳转，所有在该窗口下的页面都共享（同步）window.name属性（包括获取、修改操作）。所以，我们可以将需要跨域访问的资源保存在该属性中共享即可。
客户端代码
<sctipt>
// 自执行，避免污染全局空间
(function(){
// 动态创建 iframe 插入DOM树，实现跨域访问资源
var nIframe = document.createElement('iframe');
nIframe.style.cssText = 'display: none';
nIframe.src = 'http://www.163.com/info2.html';
nIframe.onload = function(){
// 修改 src 到同源域名下（空白页）
this.src = 'about:blank';
this.onload = function() {
// 取得跨域访问资源，移除该 iframe
var data = JSON.parse(this.contentWindow.name);
document.body.removeChild(this);
// 接下来就可以处理得到的资源了
...
}
}
document.body.appendChild(nIframe);
})(window);
</script>
我们只是使用了一个 <iframe> 作为代理获取到跨域资源，但是 <iframe> 之间也是不允许跨域访问的，所以我们再次把它的 src 修改为同源页面或者空白页就可以获取到 window.name 的属性了，也就是我们需要的资源。同样地，我们也可以在最后移除创建的 iframe 元素。
资源页面代码
<script>
window.name = '["Name","Sex","Age"]';
</script>
由于资源页面仅仅是为了传递数据，我们通常在动态创建 iframe 时设置 CSS 样式为 display：none，避免它影响客户端页面的布局。
document.domain
即便是同一个页面的 <iframe> 也是有跨域限制的，若多个 <iframe> 载入的页面恰好是跨子域的话（主域名相同），我们可以将它们各自的 document.domain 设置为它们共有的主域名即可实现跨域访问。下面举个例子，简单的说明一下：
// iframe1 ： www.163.com
<script>
document.domain = "163.com";
</script>
// iframe2 ： study.163.com
<script>
document.domain = "163.com";
</script>
这样设置好之后，我们则可以在全局范围内完成两个 iframe 跨子域的数据访问。
同理，我们依然可以动态创建一个 iframe 去完成跨子域的数据访问，具体实现我们可以参考上面共享 window.name 时动态创建 iframe 的方法。需要注意的是，资源页面的 document.domain 属性要提前设置好，否则在客户端页面是无法跨域去修改资源页面的属性的。
HTML5 postMessage API
在 HTML5 中，实现了一个安全便捷的跨域消息传递方案，也就是 postMessage() 方法，它有两个参数：第一个参数为发送的数据，绑定到 event 事件对象的 data 属性上；第二个参数为数据接受者限制域。在接受者页面还需要一个 message 事件供我们监听是否有数据发送过来配合使用。
客户端代码
<script>
// 注册 message 事件准备接受数据
window.onmessage = function(e){
// 可以先判断发送源再处理，保证安全
// if e.origin == "http://study.163.com"
// 获取跨域访问的数据
var data = JSON.parse(e.data);
// 处理数据
...
// 销毁该事件
this.onmessage = null;
// 移除该 iframe
document.body.removeChild(nIframe);
}
var nIframe = document.createElement('iframe');
nIframe.style.cssText = "display: none";
nIframe.src = "http://domain1.com:8081/info2.html";
document.body.appendChild(nIframe);
</script>
在进行数据接收和处理之前，我们可以使用 event.origin 来判断发送源是否已知，保证页面安全。
资源页面代码
<script>
window.top.postMessage('["Name","Sex","Age"]', 'http://www.163.com');
</script>
第二个参数规定了数据接受者的域限制，这个也是为了保证敏感数据不会发送给未知页面，确保数据安全。
结语
事实上，跨域访问是个很常用的需求，而许多解决方法也都异曲同工，也不只有这些方法才能实现跨域访问，采用什么方法都是按实际需求来选择的。而我们使用跨域访问技术，是违背了浏览器默认行为的，所以更应该确保安全性。