js跨域解决方案

编辑
文档创建者:文档助手1 (67727 )     浏览次数:4434次     编辑次数:21次     最近更新:jiangsr 于 2018-01-16     

目录:

1. 概念编辑

1.1 跨域
域(Domain)是Windows网络中独立运行的单位,域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后,2个域之间不但可以按需要相互进行管理,还可以跨网分配文件和打印机等设备资源,使不同的域之间实现网络资源的共享与管理。
简而言之,跨域访问,就是 A 网站的 javascript 代码试图访问 B 网站,包括提交内容和获取内容。由于安全原因,跨域访问是被各大浏览器所默认禁止的。详细列表如下:
注:1、如果是协议和端口造成的跨域问题“前台”是无能为力的;2、在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。

2. 问题描述编辑

访问服务器下的一个html文件,该文件中嵌了一个FineReport的模板文件,但是该模板文件在另外一个域中,如果直接访问html文件,是无法调用到FineReport模板文件的这就涉及到跨域问题,该如何解决呢?

3. 解决思路编辑

通过一个中转文件来实现跨域通信,因为js可以执行不同域下的文件,那么就可以将该被执行文件放置需要通信的那个不同的域下,该被执行文件可以对同一个域下的所有数据进行操作。

4. 示例编辑

上一节中介绍了同一服务器,同一端口号不同工程下的跨域访问,是专门针对ie8的解决方案,在本章节就介绍同一机器下,不同端口号之间的js跨域访问。
端口号为8080的服务器下的lo1.html中嵌入了一个iframe,iframe中展现的是端口号为8081下的一个FineReport模板文件test.frm,test.frm里面有一个文本框和一个按钮,在点击test.frm里面的按钮时,则可将文本框中的内容赋给lo1.html中的文本框。

5. 操作步骤编辑

5.1 web服务器准备
在机器下新建两个tomcat服务器,tomcat1和tomcat2,tomcat1使用默认端口号8080,tomcat2将http访问端口号改为8081,shutdown端口号(默认8005)改为8055,8009端口号改为8099,详细查看Tomcat端口配置
5.2 tomcat1
在tomcat1下部署WebReport工程,该工程%FR_HOME%/WebReport/下需要放三个文件,lol.html,proxy.html,proxy.js。
proxy.html是中转的html,它和lol.html(主页面)在同一个域,其作用就是执行proxy.js,并被test.frm动态加载,而proxy.js是其他域的传来的数据对lol.html的处理。

(1)lol.html代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="zh-CN" /> <meta content="all" name="robots" /> <title>跨域</title> <body> <input id="main" type="text" value="I'm main"/> <iframe src="http://192.168.101.226:8081/WebReport/ReportServer?formlet=test.frm" height="300" width="500"></iframe> </body> </head> </html>
(2) proxy.html代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Language" content="zh-CN" /> <meta content="all" name="robots" /> <title>代理</title> <script type="text/javascript" src="proxy.js"> </script> <body> </body> </head> </html>
(3)proxy.js代码如下:
var doc = window.top.document; doc.getElementById("main").value = getQueryStringRegExp("tarValue"); function getQueryStringRegExp(name) { var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i"); if (reg.test(location.href)) { return unescape(RegExp.$2.replace(/\+/g, " ")); } else { return ""; } };
5.3 tomcat2
在tomcat2服务器下部署工程WebReport,将我们的报表工程独立部署过去,删除reportlet下的所有模板文件,新建一个决策报表文件test.frm,样式如下:
222
给button0增加点击事件,代码如下:
var tarValue = this.options.form.getValueByName("textEditor0");//这里根据是报表用不同的方式,自己定义 var url = "http://192.168.101.226:8080/WebReport/proxy.html?_=" + new Date().getTime() + "&tarValue=" + tarValue; alert(url); var iframe = document.getElementById('proxy'); if (!iframe) { // 如果iframe还没有加进去,则加进去 iframe = document.createElement('iframe'); document.getElementsByTagName('head')[0].appendChild(iframe); iframe.setAttribute('name','proxy'); iframe.setAttribute('id','proxy'); } iframe.setAttribute('src', url);
注:上面的所有代码中涉及到的ip地址都要改成自己的ip地址,不能用localhost。
5.4 效果查看
同时启动tomcat1和tomcat2,在浏览器端打开lo1.html,即在地址栏输入http://192.168.101.226:8080/WebReport/lol.html,如下图:
222
在iframe中的文本框中输入FineReport,点击button0按钮,会看到最左侧的文本框(显示I'm main的文本框)只中也会显示FineReport,这就实现了js跨域,如下图:
222


附件列表


主题: 部署集成
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: