vue项目高德地图引入https相关报错
vue项目中高德地图引入相关问题
公司年前一个vue项目一期,其中有个数据可视化模块引入了高德地图,年前发布正式环境的时候,运维是没有配置http的,所以相关问题没有暴露出来。
今天突然领导在使用这个项目的时候,点开对应的数据可视化模块时,页面处理空白加载状态。下面就直接给出一个排查思路吧。
原因和解决方案
排查流程(虽然上面已经直接说出了问题所在,下面还是重头记录下流程吧)
1、测试首先跟进处理,先排查账号的权限问题。
2、开发跟进,前端页面检查,看下报错信息。
3、确认问题,出解决方案。
4、处理问题。
经过步骤1,测试对问题排查后,就移交开发跟进。老方法,前端页面检查,看下报错信息。
前端页面捕捉报错信息如下:
Mixed Content: The page at 'https://z*****.com/cockpit/' was loaded over HTTPS, but requested an insecure script 'http://webapi.amap.com/maps?v=1.4.3&key=ad*************0a27da3bde7942&plugin=AMap.ControlBar'. This request has been blocked;
根据错误信息,搜索了下,大致知道了问题在哪里了,是https证书相关的问题。
复制http://webapi.amap.com/maps
到前端工程搜索,发现这场引入确实是用http引入的,工程中对应html中的引入代码如下:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=adf5***************&plugin=AMap.ControlBar"></script>
到此,也结合参考了以下对应的文章
错误:Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an in…
大致就得出来了问题的症结所在了。
因为年前上线正式环境,运维给出来的链接是http开头的,vue项目中引入的高德地图也是直接用http引入的,自然没有什么问题。
年后,也不知道具体什么时候,运维将https证书配置上了,又加上中间我们前端又被安排做了两个其他项目,现在领导突然看这个项目,发现了这个有问题。所以就出现了今天的这个模块的bug了。
问题定位到了,那么接下去 就好办了,改呗。
怎么改?前端重新打包么?还是运维那边改之前的文件?还是让运维把https先撤回,还是用http对外。
先评估了下哪个地方改变,对应的复杂程度和代价。
因为一期项目后,年后这个前端项目前端新入职的员工 已经对应改过了,因为后端的框架也做了调整,现在很多东西都和年前发布的版本都不一样了。还没真正上线,就已经改版的那种。
所以想前端直接改代码再打包,先不说代码能否保持一致,到时测试还得全面测试一遍,所以这个太多麻烦了,也不给自己找麻烦了。还是直接找运维改吧。
这边一过去找运维,其实人家运维也一直知道这个问题,只是之前这个项目都中止了,人家也就没管了。看他没有想把https改成http的想法。那么直接给运维发了这个关键代码,让他把服务器上对应的代码
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=adf5***************&plugin=AMap.ControlBar"></script>
中的http://
改成https://
。
到此,相关问题已经解决。
是不是感觉很白痴,这个还有什么好记录的。是的,我写完了,也如此认为的。