JS 跨域解决方案

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

    http://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上。

    2. 概述

    2.1 问题描述

    访问服务器下的一个 HTML 文件,该文件中嵌了一个 FineReport 的模板文件,但是该模板文件在另外一个域中,如果直接访问 HTML 文件,是无法调用到 FineReport 模板文件的这就涉及到跨域问题,该如何解决呢?

    2.2 解决思路

    通过一个中转文件来实现跨域通信,因为 JS 可以执行不同域下的文件,那么就可以将该被执行文件放置需要通信的那个不同的域下,该被执行文件可以对同一个域下的所有数据进行操作。

    3. 示例

    在 上一节 中介绍了同一服务器,同一端口号不同工程下的跨域访问,是专门针对ie8的解决方案,在本章节就介绍同一机器下,不同端口号之间的 JS 跨域访问。

    端口号为 8080 的服务器下的 lo1.html 中嵌入了一个 iframe,iframe中展现的是端口号为8081下的一个 FineReport 模板文件 test.frm,test.frm 里面有一个文本框和一个按钮,在点击 test.frm 里面的按钮时,则可将文本框中的内容赋给lo1.html中的文本框。

    4. 操作步骤

    4.1 Web 服务器准备

    在机器下新建两个 Tomcat 服务器,Tomcat1 和 Tomcat2,Tomcat1 使用默认端口号 8080,Tomcat2 将 http 访问端口号改为 8081,shutdown 端口号(默认 8005)改为 8055,8009 端口号改为 8099,详细查看 Tomcat 端口配置

    4.2 Tomcat1

    在 Tomcat1 下部署 WebReport 工程,该工程%FR_HOME%/webapps/webroot/下需要放三个文件,lol.html,proxy.html,proxy.js。

    proxy.html 是中转的 HTML,它和 lol.html(主页面)在同一个域,其作用就是执行 proxy.js,并被 test.frm 动态加载,而 proxy.js 是其他域的传来的数据对 lol.html 的处理。

    4.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>

    4.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>

    4.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 "";
       }
    };

    4.3 Tomcat2

    在 Tomcat2 服务器下部署工程 WebReport,将我们的报表工程独立部署过去,删除 reportlet 下的所有模板文件,新建一个决策报表文件 test.frm,样式如下:

    222

    给 button0 增加点击事件,代码如下:

    var tarValue = this.options.form.getValueByName("textEditor0");//这里根据是报表用不同的方式,自己定义
    var url = "http://192.168.101.226:8080/webapps/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。

    4.4 效果查看

    同时启动 Tomcat1 和 Tomcat2,在浏览器端打开 lo1.html,即在地址栏输入http://192.168.101.226:8080/webapps/webroot/lol.html,如下图所示:
    222

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

    222


    附件列表


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

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

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