ArcGIS API For Javascript :如何解决跨网不能正常获取依赖项的问题?
一、前言
政企项目通常会在自组网以及保密网运行,有些单位甚至会有两个物理隔绝的网络存在。通常情况下我们会在两个网络中部署相同的地图服务和依赖项。但是也有其中一个网络密级很高没有服务器资源,不能单独部署依赖项的情况出现。
二、案例与原因初探
例如:现有 A、B 两张物理隔绝的网络。其中 A 网部署地图服务与依赖项, B 网密级很高,只进不出,且无法部署依赖项。
我们首先采用的是在前置机 C(双网卡,与 A 双向通信,与 B 单向通信)搭建转发服务,在此过程中就会出现依赖项加载失败的情况。根据对控制台网络请求查看,请求的 js 资源 IP 为 B 网配置项中的 IP 段,说明 A 网中依赖项中的 init.js 和 dojo.js 中配置写死,造成 B 通过 C 无法正常请求到相关资源。
三、解决方案
核心是使 init.js 和 dojo.js 动态获取主机 IP 更新配置项。基于此思路,我们进行了以下尝试:
1. 配置项 使用相对路径 —— 失败
2. 配置项 A 网代理 A 网(使用 ArcGIS 代理 + 原始 IP 端口 拼接路径) —— 失败
3. 配置项 使用 B 网配置 IP 端口 —— 失败
4. 配置项 C 机代理 A 网(使用前置机转发 + 原始 IP 端口 拼接路径)——失败
5. 配置项 C 机代理 B 网(使用前置机转发 + B 网配置 IP 端口 拼接路径)——失败
6. 配置项 获取当前请求的服务 IP 端口,更新至到配置项 —— 成功 10%
6.1 遇到的问题及解决思路
根据自动获取当前服务 IP 端口,在 B 网中可以正常调用 init.js ,但是 zh-cn.js 未能正常加载,说明在加载相关基础 js 时会重新拼接路径,而此时所获取的 baseurl 并非我们在头部修改的当前服务 IP 端口。
因此需要在源码中找到相对应拼接路径的位置,将其强行修改与头部的 baseurl 保持一致。
6.2 解决过程
6.2.1 获取当前服务 IP 端口
(function(exports) {
var doc = exports.document
, a = {}
, expose = +new Date()
, rExtractUri = /((?:http|https|file):\/\/.*?\/[^:]+)(?::\d+)?:\d+/
, isLtIE8 = ('' + doc.querySelector).indexOf('[native code]') === -1;
exports.getCurrAbsPath = function() {
// FF,Chrome
if (doc.currentScript) {
return doc.currentScript.src;
}
var stack;
try {
a.b();
} catch (e) {
stack = e.fileName || e.sourceURL || e.stack || e.stacktrace;
}
// IE10
if (stack) {
var absPath = rExtractUri.exec(stack)[1];
if (absPath) {
return absPath;
}
}
// IE5-9
for (var scripts = doc.scripts, i = scripts.length - 1, script; script = scripts[i--]; ) {
if (script.className !== expose && script.readyState === 'interactive') {
script.className = expose;
// if less than ie 8, must get abs path by getAttribute(src, 4)
return isLtIE8 ? script.getAttribute('src', 4) : script.src;
}
}
}();
}(window));
6.2.2 配置 baseUrl
将上述代码插入 init.js 最上部分,然后搜索 [HOSTNAME_AND_PATH_TO_JSAPI] ,将其更换为 getCurrAbsPath.replace("/"+getCurrAbsPath.split("/").pop(),"") + "/dojo" 。
6.2.3 找到二次拼接位置
根据 zh-cn 检索,找到以下位置。
"*now": function(q) {
q(['dojo/i18n!*preload*esri/nls/jsapi*["ar","az","ca","cs","da","de-de","el","en-gb","en-us","es-es","fi-fi","fr-fr","he-il","hu","it-it","ja-jp","ko-kr","nl-nl","nb","pl","pt-br","pt-pt","ro","ru","sk","sl","sv","th","tr","zh-tw","zh-cn","ROOT"]'])
},
在这里打断点,逐行执行,找到拼接处。
Wa = function(a, b, g, d, r, q, h, k, f, x) {
var t, y, w, m;
m = /^\./.test(a);
if (/(^\/)|(\:)|(\.js$)/.test(a) || m && !b)
return wa(0, a, 0, a);
a = Va(m ? b.mid + "/../" + a : a);
if (/^\./.test(a))
throw c("irrationalPath", a);
x || m || !q.star || (w = Aa(a, q.star[1]));
!w && b && (w = (w = Aa(b.mid, q)) && Aa(a, w[1]));
w && (a = w[1] + a.substring(w[3]));
b = (na = a.match(/^([^\/]+)(\/(.+))?$/)) ? na[1] : "";
(t = g[b]) ? a = b + "/" + (y = na[3] || t.main) : b = "";
var p = 0;
e(k, function(b) {
var c = a.match(b[0]);
c && 0 < c.length && (p = l(b[1]) ? a.replace(b[0], b[1]) : b[1])
});
if (p)
return Wa(p, 0, g, d, r, q, h, k, f);
if (g = d[a])
return f ? wa(g.pid, g.mid, g.pack, g.url) : d[a];
d = (w = Aa(a, h)) ? w[1] + a.substring(w[3]) : b ? ("/" === t.location.slice(-1) ? t.location.slice(0, -1) : t.location) + "/" + y : v("config-tlmSiblingOfDojo") ? "../" + a : a;
debugger
/(^\/)|(\:)/.test(d) || (d = r + d);
console.log(wa(b, a, t, Va(d + ".js")))
return wa(b, a, t, Va(d + ".js"))
}
发现 /(^\/)|(\:)/.test(d) || (d = r + d); 是拼接语句,r 是问题关键。我们只需要在 debugger 处将 r 重新赋值即可。
r=getCurrAbsPath.replace("/" + getCurrAbsPath.split("/").pop(), "") + "/dojo/";
6.3 测试
B 网成功地向 C 前置机转发服务请求,获得了 A 网的地图依赖项和地图服务。至此问题解决。
四、总结
以上就是困扰了很久的跨网未能正常获取地图资源的问题的解决过程与解决方法。
ArcGIS API For Javascript :如何解决跨网不能正常获取依赖项的问题?的更多相关文章
- arcgis api for JavaScript _跨域请求
arcgis api for JavaScript 中出现跨域请求是常见问题, 通常出现类似如下错误消息类似: XMLHttpRequest cannot load http://10.32.2.7 ...
- ArcGIS API for javascript开发笔记(二)——解决ArcGIS Service中的服务在内网环境下无法进行javascript预览问题
感谢一路走来默默支持和陪伴的你~~~ ----------------------------拒绝转载-------------------------------- 1.问题说明 在使用ArcGIS ...
- ArcGIS API for JavaScript 4.x 本地部署之跨域问题解决法:CORS
众所周知,在离线部署ArcGIS API for JavaScript时,有时候会产生微件上的字体.符号变成方框的问题.这是遇到了跨域,只需要对所在服务器进行配置即可. 本篇使用的环境是:API配置在 ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- 【1】ArcGIS API for JavaScript 4.5/4.6 本地部署
惭愧,和我的学弟比起来,我所开始接触前端开发,ArcGIS API for JavaScript的时间和深度远远不及于他. 一年之尾,亦是一年之始,我也将正式开始我的博客生涯.本人在校学习并且做项目, ...
- ArcGIS API for Javascript 使用缓冲区结果做query查询出现“esri.config.defaults.io.proxyUrl 尚未进行设置”错误
1.前言 在研究ArcGIS API for JavaScript时会遇到这样的问题,比如我们在做缓冲区分析时,用分析的范围作为空间查询query的参数,在执行结果中总是会看到“esri.config ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- 基于ArcGIS API for Javascript的地图编辑工具
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...
- arcgis api for javascript 3.16开发(一)
原来一直都在用Flex开发arcgis的地图接口,用的时间很长,用的习惯也顺手,可Flex这个开发工具已经基本要淘汰了,并且地图借助flash的方式加载在浏览器里已经不能适应webgis的快速开发需求 ...
随机推荐
- C++中哪些函数不能声明为inline?
inline关键字仅仅是对编译器的建议,编译器有权力决定一个函数是否在调用处嵌入.因为内联函数要在调用处展开,编译器必须能在每一个调用处能看到该函数的定义,因此最好将函数实现放在头文件中(而且实现在类 ...
- Halcon一日一练:图像设备介绍
Halcon在设计之初就提供了完整的图像采集方案,适应了多种图像设备采集图像,以及各种不同环境的采集方案. 通常情况下,图像的采集应该是所有机器视觉项目首要解决的任务,不幸的是,需要解决图像采集的问题 ...
- Linux下mqttServer搭建
1.apache-apollo 创建服务 tar -zxvf apache-apollo-1.7-unix-distro.tar.gz cd /home/bk/apache-apollo-/bin . ...
- python中eval的使用
eval函数就是实现str与list.dict.tuple之间的转化栗子: a = "[[1,2], [3,4], [5,6], [7,8], [9,0]]" aa = eval( ...
- springboot security+redis+jwt+验证码 登录验证
概述 基于jwt的token认证方案 验证码 框架的搭建,可以自己根据网上搭建,或者看我博客springboot相关的博客,这边就不做介绍了.验证码生成可以利用Java第三方组件,引入 <dep ...
- Java socket Tcp协议 实现文件传输
1.文件加密上传后发现文件已损坏: 原因:使用 read(byte[]) 方法不能够准确的获取到正确的字节数,有可能比 byte[].length 小,所以在解密的时候出现错误. 解决办法: 判断读取 ...
- 微信公众号 访问403问题,样式错乱,js失效
我服了,还是那个微信公众号小项目. 这个项目用的是ssm+velocity 问题的是,有时候页面加载会乱,js,css都加载不出来. 这个问题也是很久了,前几天开会,那个甲方医院很不开心,说是要找下家 ...
- Mysql数据库(五)表记录的检索
一.基本查询语句 二.单表查询 1.查询所有字段 mysql> SELECT * FROM tb_bookinfo; +----------+-----------+--------+----- ...
- django-ForeignKey,OneToOneField,ManyToManyField
进入到django自带的related.py中,可以看到 1.ForeignKey 初始化的参数有: to, on_delete, related_name=None, related_query_n ...
- 省市区三级联动(vue)
vue项目中使用到三级联动,现在自己实现一个三级联动,仅供大家参考一下,直接上代码. <template> <section class="container"& ...