chrome禁止混合内容（Mixed Content）三种解决办法

问题描述

在Chrome浏览器内，https协议的网站内加载http协议的图片，会报以下错误，图片也会加载不出来。

 

rust

复制代码

Mixed Content: The page at 'https://beef.zz.com/front/#/biz/cultivationList/cultivationDetails/5dbf836751ba4b5d9e246ad44f013200' was loaded over HTTPS, but requested an insecure element 'http://www.aa.com/files/financialAppUpload/20201230/0403e240-95dc-4c91-a032-2262e396c411-20201230.jpg'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html 

原因

chrome阻止了混合内容，会自动将http升级到https，即使https下没有该资源，也不回退，可能会导致网站损坏（即加载不出来图片）。

解决办法（一）

点击地址栏小锁图标，选择网站设置

拉到最下边，找到不安全内容 选择允许

刷新页面就可以展示图片了。

解决办法（二）

1.首先确定引入的资源可以在http和https下都能访问
比如：

res.wx.qq.com/open/js/jwe…

res.wx.qq.com/open/js/jwe…
2.在head里面写类似相对路径的形式

 

xml

复制代码

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript"></script> 

解决办法（三）

1.在页面中加入（meta）头中添加upgrade-insecure-requests

 

ini

复制代码

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

2.这将会把http请求转化为https请求。这样就不会再出现Mixed Content的错误了。

作者：非优秀程序员
链接：https://juejin.cn/post/7189794905219137595
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。