在项目中遇到一个问题,与Ajax的跨域相关,具体问题描述如下:
在客户端的JS,使用ajax和服务器进行交互,出现的是
Access to restricted URI denied" code: "1012
[Break on this error] ajaxreq.open("GET",filename);
问题,如果此html以及JS文件放到服务器端,则不会出现问题,就是ajax跨域问题。但是此项目的需求不能将此html及Js文件放到服务器端,只能放到本地,从网上查看了很多资料,感觉在本地搭建一个服务器比较靠谱,将html放到本地服务器(这样可以进行一些本地操作,比如读本地的文件),这样架构就变成这样了:
对于Ajax跨域的问题,通过网上的资料学习,现总结如下:
1.什么引起了ajax跨域问题
ajax本身是通过xmlHttpRequest对象来进行数据的交互,而浏览器处于安全的考虑,不允许JS代码进行跨域操作,所以会警告。
2.解决方案需要根据具体情况具体解决
一 、本域和子域的相互互访: www.aa.com 和book.aa.com
二、本域和其他域的访问: www.aa.com 和 www.bb.com 用ifram
三、本域和其他域的相互访问: www.aaa.com 和 www.bb.com 用XMLHttpRequest访问代理
四、本域和其他域的访问: www.aa.com 和 www.bb.com ,用JS创建动态脚本。
解决方法:
一,对于 www.aa.com 和book.aa.com,可以将book.aa.com用iframe添加到 www.aa.com 的某个页面下,在 www.aa.com 和ifram里面都加上document.domain = "aa.com",这样就可以统一域了,直接调用JS即可。
二、可以使用window.location对象的hash属性。这个感觉有点乱。hash属性就是 http://domain/web/a.htm#dsha 里面#后面的部分。利用JS改变hash网页不会刷新,可以这样通过JS访问hash值来做到通信。大体的过程是页面a和页面b在不同域下,b通过iframe添加到a里,a通过JS修改iframe的hash值,b里面做一个监听(应为JS只能修改hash,数据是否改变只能由b自己来判断),检测到b的hash值被修改了,得到修改的值,经过处理返回a需要的值,再来修改a的hash值,同样a里面也要做监听,如果hash变化的话就取得返回
三、 www.aa.com 和 www.bb.com ,假如说你要取得数据就访问某某链接参数是什么样子的等等,最后返回的数据是什么格式的,而你需要做的就是在你的域下( www.aa.com )新建一个网页,让服务器去别人的网站上获取数据,再返回给你。比如domain1的a向同域下的RouteServlet请求数据,RouteServlet向domain2下的getRouteServlet发送请求,Domain2将数据返回给RouteServlet,RouteServlet再返回给a,这样就完成了一次数据请求,RouteSrevlet在当中充当了代理的作用。
四、这个是用<script>标签来请求的,原理就是JS文件注入,在本域内的a内生成一个JS标签,他的src指向请求的另外一个域的某个页面b,b返回数据即可。
简单来说,
第一种情况:域和子域的问题,可以完全解决交互。
第二种情况:跨域,实现过程比较复杂,需要两个域的开发者都能控制,适用于简单交互。
第三种情况:跨域,开发者只控制一个域即可,实现过程需要增加代理取得数据,是常用的方式。
第四种情况:跨域,两个域开发者都需要控制,返回一段JS代码。