历史版本24 :不同端口号下跨域调用 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，详细查看 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">
<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">
<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