JS 跨域解决方案- FineReport帮助文档 - 全面的报表使用教程和学习资料

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 跨域，如下图所示：

已經是第一篇

已經是最後一篇

有幫助
沒幫助
只是瀏覽
圖片不清晰
用語看不懂
功能說明看不懂
操作說明太簡單
內容有錯誤

中文（简体） English 日本語

中文（繁體）

文檔回饋

滑鼠選中內容，快速回饋問題

滑鼠選中存在疑惑的內容，即可快速回饋問題，我們將會跟進處理。

不再提示

10s後關閉

JS 跨域解决方案