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

电玩女神 2022-11-16 13:50 284阅读 0赞

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

*  vue项目中高德地图引入相关问题
 *   *  原因和解决方案

# 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中的引入代码如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ_size_16_color_FFFFFF_t_70]

到此，也结合参考了以下对应的文章  
[错误:Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an in…][Mixed Content_ The page at _https_XXX_ was loaded over HTTPS_ but requested an in]  
大致就得出来了问题的症结所在了。  
因为年前上线正式环境，运维给出来的链接是http开头的，vue项目中引入的高德地图也是直接用http引入的，自然没有什么问题。  
年后，也不知道具体什么时候，运维将https证书配置上了，又加上中间我们前端又被安排做了两个其他项目，现在领导突然看这个项目，发现了这个有问题。所以就出现了今天的这个模块的bug了。

![网页错误][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ_size_16_color_FFFFFF_t_70 1]

问题定位到了，那么接下去 就好办了，改呗。  
怎么改？前端重新打包么？还是运维那边改之前的文件？还是让运维把https先撤回，还是用http对外。  
先评估了下哪个地方改变，对应的复杂程度和代价。  
因为一期项目后，年后这个前端项目前端新入职的员工 已经对应改过了，因为后端的框架也做了调整，现在很多东西都和年前发布的版本都不一样了。还没真正上线，就已经改版的那种。  
所以想前端直接改代码再打包，先不说代码能否保持一致，到时测试还得全面测试一遍，所以这个太多麻烦了，也不给自己找麻烦了。还是直接找运维改吧。  
这边一过去找运维，其实人家运维也一直知道这个问题，只是之前这个项目都中止了，人家也就没管了。看他没有想把https改成http的想法。那么直接给运维发了这个关键代码，让他把服务器上对应的代码

中的`http://`改成`https://`。  
到此，相关问题已经解决。  
是不是感觉很白痴，这个还有什么好记录的。是的，我写完了，也如此认为的。

![!][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ_size_16_color_FFFFFF_t_70 2]  
[解决后该模块正常了][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ_size_16_color_FFFFFF_t_70]: /images/20221022/347d8cf784d64965af0d3f88c8cbc5ec.png
[Mixed Content_ The page at _https_XXX_ was loaded over HTTPS_ but requested an in]: https://www.jianshu.com/p/c2bfd951d003
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/0efe8a8d1c8a4b21b04b9a93b83adb91.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/f34a6c5925ab4d52bf6b803b402b51f8.png
[Link 1]: https://img-blog.csdnimg.cn/2021040715060312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lET3NoaTIwMTEwOQ==,size_16,color_FFFFFF,t_70