1. 概述
1.1 跨域概念
域（Domain）是 Windows 网络中独立运行的单位，域之间相互访问则需要建立信任关系（即 Trust Relation）。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2 个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。
简而言之，跨域访问，就是 A 网站的 JavaScript 代码试图访问 B 网站，包括提交内容和获取内容。由于安全原因，跨域访问是被各大浏览器所默认禁止的。
详细列表如下图所示：
| 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 | 主域相同，子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js | 同一域名下，不同二级域名（同上） | 不允许（Cookie 情况下也不允许访问） |
http://www.cnblogs.com/a.js http://www.a.com/b.js | 不同域名 | 不允许 |
注：如果是协议和端口造成的跨域问题“前台”是无能为力的；
在跨域问题上，域仅仅是通过“URL 的首部”来识别而不会去尝试判断相同的 IP 地址对应着两个域或两个域是否在同一个 IP上。
1.2 问题描述
访问服务器下的一个 HTML 文件，该文件中嵌了一个 FineReport 的模板文件，但是该模板文件在另外一个域中，如果直接访问 HTML 文件，是无法调用到 FineReport 模板文件的这就涉及到跨域问题，该如何解决呢？
1.3 解决思路
通过一个中转文件来实现跨域通信，因为 JS 可以执行不同域下的文件，那么就可以将该被执行文件放置需要通信的那个不同的域下，该被执行文件可以对同一个域下的所有数据进行操作。
2. 示例
在 上一节 中介绍了同一服务器，同一端口号不同工程下的跨域访问，是专门针对 IE8 的解决方案，在本章节就介绍同一机器下，不同端口号之间的 JS 跨域访问。
端口号为 8080 的服务器下的 lo1.html 中嵌入了一个 iframe，iframe中展现的是端口号为 8081 下的一个 FineReport 模板文件 test.frm，test.frm 里面有一个文本框和一个按钮，在点击 test.frm 里面的按钮时，则可将文本框中的内容赋给lo1.html中的文本框。
2.1 Web 服务器准备
在机器下部署两个 Tomcat 服务器，Tomcat1 和 Tomcat2，Tomcat1 使用默认端口号 8080，Tomcat2 将 http 访问端口号改为 8081，shutdown 端口号（默认 8005）改为 8055，8009 端口号改为 8099，操作参见文档：Tomcat 端口配置
2.2 Tomcat1
在 Tomcat1 下部署 webroot 工程，该工程%FR_HOME%/webapps/webroot/下需要放三个文件，lol.html，proxy.html，proxy.js。
proxy.html 是中转的 HTML，它和 lol.html（主页面）在同一个域，其作用就是执行 proxy.js，并被 test.frm 动态加载。而 proxy.js 是其他域的传来的数据对 lol.html 的处理。
2.2.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//webroot/decision/view/report?viewlet=test.frm" height="300" width="500"></iframe>
</body>
</head>
</html>
2.2.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>
2.2.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 "";
}
};
2.3 Tomcat2
在 Tomcat2 服务器下部署工程 webroot，将报表工程独立部署过去，删除 reportlet 下的所有模板文件，新建一个决策报表文件 test.frm。
将一个参数界面组件拖到 body 区域，里面拖进去一个文本空间一个按钮空间，并给按钮控件添加点击事件，如下图所示：
给 button0 增加点击事件，代码如下：
var tarValue = this.options.form.getValueByName("textEditor0");
//这里根据是报表用不同的方式，自己定义
var url = "http://192.168.101.226:8080/webroot/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。
2.4 效果查看
同时启动 Tomcat1 和 Tomcat2，在浏览器端打开 lo1.html，即在地址栏输入http://192.168.101.226:8080/webroot/lol.html，如下图所示：
在 iframe 中的文本框中输入 FineReport，点击 button0 按钮，会看到最左侧的文本框（显示 I'm main 的文本框）只中也会显示 FineReport，这就实现了 JS 跨域，如下图所示：