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://。
到此，相关问题已经解决。
是不是感觉很白痴，这个还有什么好记录的。是的，我写完了，也如此认为的。

解决后该模块正常了

vue项目高德地图Mixed Content: The page at ‘https://****.com/cockpit/‘ was loaded over HTTPS, b相关推荐

谷歌浏览器图片不显示问题 Mixed Content: The page at ‘＜URL＞‘ was loaded over HTTPS
谷歌浏览器图片显示问题: 具体原因参考:https://blog.csdn.net/weixin_38634125/article/details/108413427 (这是因为谷歌浏览器对于http ...
vue使用高德地图aMap实现轨迹动画查询显示
vue使用高德地图搜索地址添加标记marker,定位,拖拽选址功能https://blog.csdn.net/SmartJunTao/article/details/123955679 实现效果: 需 ...
vue使用高德地图小demo（标记点，画线，3D，叠加图片图层）
vue使用高德地图小demo(标记点,画线,3D) 这个模式是3D的,可以看到地图是带有一定的倾角的. 注意:3D模式下,是不能够将进行画线的,不能使用PathSimplifier,改成2D可以正常使 ...
解决Mixed Content:the page at‘https://‘ was loaded over HTTPS,but requested an insecure resource ‘http
解决Mixed Content:the page at'https://' was loaded over HTTPS,but requested an insecure resource 'http ...
vue使用高德地图-进行显示地图和查询天气
vue使用高德地图高德地图显示,实现了天气查询效果(Vue) 在index.html中引入高德地图的css和js vue 插件列表问题解决: 高德地图显示,实现了天气查询效果(Vue) 在ind ...
vue调用高德地图实现定位
vue调用高德地图实现定位第一步创建高德地图key 第二步:下载vue-amap npm install vue-amap --save 第三步:在项目main.js引入vue-amap impor ...
Vue使用高德地图api实现热力图动态缩放
Vue使用高德地图api实现热力图动态缩放前言 1.引入高德js 2.显示基本的热力图 3.显示优化 4.Vue页面完整代码前言项目需要,根据积水数据的多少,在页面中进行展示,选用高德热力图ap ...
使用vue和高德地图，仿58地图找房pc端，且解决marker过多卡顿
使用vue和高德地图,仿58地图找房pc端,且解决marker过多卡顿 1.在index.html引入高德地图链接 https://webapi.amap.com/maps?v=1.4.15& ...
解决Mixed Content: The page at https://xxx was loaded over HTTPS
背景:现有一个项目,网站访问地址示例为 https://www.testcase.com,其中某个功能需要用到外部的服务(例如http:42.192.36.246/api/api.js),并且这个服务 ...

vue项目高德地图Mixed Content: The page at ‘https://****.com/cockpit/‘ was loaded over HTTPS, b

vue项目高德地图引入https相关报错

vue项目中高德地图引入相关问题

原因和解决方案

vue项目高德地图Mixed Content: The page at ‘https://****.com/cockpit/‘ was loaded over HTTPS, b相关推荐

最新文章

热门文章