知识点梳理二:跨域

140 阅读2分钟

浏览器同源策略导致的跨域

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来进行的

通过window.name跨域