反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

不同端口号下跨域调用 JS

  • 文档创建者:文档助手1
  • 历史版本:29
  • 最近更新:Leo.Tsai 于 2022-05-30
  • 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 区域,里面拖进去一个文本空间一个按钮空间,并给按钮控件添加点击事件,如下图所示:

    Snag_b6d582f.png

    给 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,如下图所示:
    20180822145915_4115.png

    在 iframe 中的文本框中输入 FineReport,点击 button0 按钮,会看到最左侧的文本框(显示 I'm main 的文本框)只中也会显示 FineReport,这就实现了 JS 跨域,如下图所示:

    20180822145915_3001.png

    附件列表


    主题: 部署集成
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526