Web 开发中跨域的几种解决方案

5,243 阅读1分钟
原文链接: harttle.com

出于安全考虑,HTML的同源策略不允许JavaScript进行跨域操作,但随着Web App的功能越来越强 各种跨域的需求催生了无数的跨域手法。甚至在HTML5标准中都给出了官方的跨域方法, 也是最近应付面试的需要,拿一篇文章来总结既有的各种跨域手段。

经过一番调研,终于把跨域的基本做法都搞清楚了。这些办法大致可以分为两类:

  • 一类是Hack,比如通过title, navigation等对象传递信息,JSONP可以说是一个最优秀的Hack。
  • 另一类是HTML5支持,一个是Access-Control-Allow-Origin响应头,一个是window.postMessage

设置 document.domain

  • 原理:相同主域名不同子域名下的页面,可以设置document.domain让它们同域
  • 限制:同域document提供的是页面间的互操作,需要载入iframe页面

下面几个域名下的页面都是可以通过document.domain跨域互操作的: http://a.com/foo, http://b.a.com/bar, http://c.a.com/bar。 但只能以页面嵌套的方式来进行页面互操作,比如常见的iframe方式就可以完成页面嵌套:

// URL http://a.com/foo
var ifr = document.createElement('iframe');
ifr.src = 'http://b.a.com/bar'; 
ifr.onload = function(){
    var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
    ifrdoc.getElementsById("foo").innerHTML);
};

ifr.style.display = 'none';
document.body.appendChild(ifr);

上述代码所在的URL是http://a.com/foo,它对http://b.a.com/bar的DOM访问要求后者将 document.domain往上设置一级:

// URL http://b.a.com/bar
document.domain = 'a.com'

document.domain只能从子域设置到主域,往下设置以及往其他域名设置都是不允许的, 在Chrome中给出的错误是这样的:

Uncaught DOMException: Failed to set the 'domain' property on 'Document': 'baidu.com' is not a suffix of 'b.a.com'

有src的标签

  • 原理:所有具有src属性的HTML标签都是可以跨域的,包括,