历史版本4 :不同端口号下跨域调用 JS 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
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，这样修改的原因是，如果只修改http端口号，两个tomcat服务器将不能同时启动，如果还不能同时启动两个服务器，请自行上网上查找答案。
5.2 tomcat1
在tomcat1下部署WebReport工程，该工程下需要放三个文件，lo1.html，proxy.html，proxy.js。
proxy.html是中转的html，它和lol.html（主页面）在同一个域，其作用就是执行proxy.js，并被test.frm动态加载，而proxy.js是其他域的传来的数据对lol.html的处理。
- lo1.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=utf08" /> <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.100.230:8081/WebReport/ReportServer?formlet=test.frm" height="300" width="500"></iframe> </body> </head> </html>
- 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=utf08" />
<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>
- 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，样式如下：
给button0增加点击事件，代码如下：
var tarValue = this.options.form.getValueByName("tar");//这里根据是报表还是表单用不同的方式，自己定义
var url = "http://192.168.100.230: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.100.230:8080/WebReport/lol.html，如下图：
在iframe中的文本框中输入FineReport，点击button0按钮，会看到最左侧的文本框（显示I'm main的文本框）只中也会显示FineReport，这就实现了js跨域，如下图：
