实践案例 | 附件预览适配移动APP,就这么简单!
小编推荐
移动端审批单据时,需要查看附件辅助决策。但由于网络环境问题,苍穹预置的移动端预览附件功能无法生效,该如何解决?
本篇实践案例提供了相应的解决方案,有效满足客户移动端审批单据时支持预览附件的需求。
撰稿人:徐翔
【温馨提示:因企业业务场景存在不同程度的差异,此案例仅供参考,请根据现场实际业务情况探讨最优解决方案,并在上线前进行充分验证。】
一、业务背景
客户为交通行业,采用星瀚作为财务共享系统。在移动端审批单据时,附件是一项重要决策项。苍穹提供了移动端预览附件的功能,但由于客户网络环境较为复杂,与附件地址有冲突,无法在移动端预览附件,导致客户在移动端无法决策当前单据通过还是打回,大大影响审批流程的运转效率,不利于业务的高效开展。如费用报销单,领导在审批时,基本采用手机端审批,且需要查看报销人上传的相关附件。
因此,客户希望能够提供相应的解决方案,满足移动端审批单据时支持预览附件的需求。
二、解决方案
问题分析
客户无法在移动端预览附件的问题是由于星瀚中附件的地址与客户网络环境冲突而引发。具体问题原因剖析如下:
1. 客户网络环境
如上图,客户方所有系统必须部署在内网,即上图灰色部分。内网跟外网纯物理隔离。客户方有自己的移动平台,星瀚移动端相关内容跟客户移动平台做集成。此处星瀚把含有当前待办审批页的相对路径(不带域名)的待办信息传递给移动平台,由移动平台在他们APP上做展示。在APP上点击待办后的网页跳转地址过程如下:
假设星瀚待办地址为:http://星瀚 /ierp/mobile.html?form=wf_approvalpagemobile。在APP服务器上的待办地址就会被代理成:http://APP服务器 /ierp/mobile.html?form=wf_approvalpagemobile
1) 用户在APP点击待办则访问:http://APP服务器 /ierp/mobile.html?form=wf_approvalpagemobile地址。【APP服务器】会将当前请求转发至【移动代理】。此时URL变为:http://移动代理/ierp/mobile.html?form=wf_approvalpagemobile地址。
2)【移动代理】再次将请求转发至内网【移动服务器】,此时URL变为:http://移动服务器 /ierp/mobile.html?form=wf_approvalpagemobile地址。
3) 内网【移动服务器】跟各业务系统做了路由规则,则此时将请求转发至最终的业务系统,也就是星瀚:http://星瀚 /ierp/mobile.html?form=wf_approvalpagemobile。
综上所述,一次完整的外网进内网的最终请求就完成了。整个过程都是在替换域名,所以就要求星瀚的地址必须为相对地址,才能被代理。
2. 产品附件情况
星瀚的附件绑定到前端界面的地址为绝对路径,即为带有域名的地址,导致客户代理服务无法代理附件,最终附件在APP上预览,下载不了。
方案整体思路
运维层面处理该问题:
1. 服务器增设一个端口专供移动端使用,如9999端口
2. 把Nginx的配置文件复制一份,路径在/usr/local/nginx/conf/conf.d下ierp.conf,原ierp.conf内容不变,假设新增的配置文件叫ierp-9999.conf。
3. 从星瀚发送出去的移动请求在新增的ierp-9999.conf上直接替换成客户外网代理地址即可。着重关注proxy_set_header参数。该配置内容如下:
listen 9999; # 苍穹虚拟主机端口号 server_name localhost; #此处可配置域名 error_log /kingdee/cosmic/nginx-logs/ierp_error.log; access_log off; access_log /kingdee/cosmic/nginx-logs/ierp_access.log ierp; underscores_in_headers on; if ($request_method !~ ^(GET|HEAD|POST)$) { return 403; } # 后端请求配置 location ~(\.(do|jsp)$)|(/ierp/(kapi|kdctlres|attachment|excelpreview|kws)/)|(/ierp/?$)|(/ierp/(index\.html|mobile\.html|login\.html|login-mobile\.html)$)|(monitor/) { proxy_pass http://next-ierp; proxy_set_header Cookie $http_cookie; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-NginX-Proxy true; proxy_set_header tenantAlias ierpprod; #租户编码 client_max_body_size 2048m; client_body_buffer_size 256k; proxy_connect_timeout 1800; proxy_send_timeout 1800; proxy_read_timeout 1800; proxy_buffering on; proxy_buffer_size 256k; proxy_buffers 4 256k; proxy_busy_buffers_size 256k; proxy_temp_file_write_size 256k; proxy_next_upstream error timeout invalid_header http_500 http_503 http_404; proxy_max_temp_file_size 2048m; proxy_http_version 1.1; proxy_set_header Connection ""; send_timeout 1800; proxy_cookie_path / "/; httponly "; proxy_set_header clientDomain https://gdcg.andfx.work:8443/cwgsh5/ierp/; #移动端代理地址 } # 静态资源前端拦截 location /ierp/ { alias /var/appstatic/static-files/cosmic/webapp/; #静态资源存放地址 }
未配置前:
配置后:
三、解决方案的可推广价值
针对网络环境复杂的客户,有相同场景的都可用该方法处理。
四、注意事项
此方法可能会衍生一个问题,即待办信息获取的href可能会带上NG配置的地址段信息,如图:
图中csgsh5为客户代理地址的一段路径,这个点在我们传送移动平台待办信息时处理即可。但会不会衍生其余问题,还需观察。
实践案例 | 附件预览适配移动APP,就这么简单!
本文2024-09-23 00:37:44发表“云苍穹知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-cangqiong-140693.html