JS 跨域解决方案

编辑
  • 文档创建者:文档助手1
  • 浏览次数:7453次
  • 编辑次数:24次
  • 最近更新:Kevin-s 于 2019-06-08
  • 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


    附件列表


    主题: 部署集成
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]