浏览器同源策略导致的跨域
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 不同域名 不允许
解决方案
通过document.domain跨域
在当前页面和当前页面下的iframe上都设置 document.domain = 'xxx'。 document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。 修改document.domain的方法只适用于不同子域的框架间的交互。
通过location.hash跨域
父页面的iframe的url上加上 #xxx参数,iframe内接受
通过HTML5的postMessage方法跨域
父页面调用 otherWindow.postMessage(message,targetOrigin); 子页面通过 window.onmessage接受
- otherWindow:指目标窗口,也就是给哪个window发消息,是 window.frames 属性的成员或者由 window.open 方法创建的窗口
- message: 是要发送的消息,类型为 String、Object (IE8、9 不支持)
- targetOrigin: 是限定消息接收范围,不限制请使用 '*
5.通过jsonp跨域 只能get
比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,假设这个json数据地址是http://damonare.cn/data.php, 那么a.html中的代码就可以这样:callback为自定义名称
<script type="text/javascript">
function dosomething(jsondata){
//处理获得的json数据
}
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>
跨域资源共享 CORS 详解
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的