解决在浏览器中https请求http资源而报警

秒速五厘米 2022-10-08 00:44 230阅读 0赞

[https://blog.csdn.net/s\_monster\_/article/details/88656073][https_blog.csdn.net_s_monster_article_details_88656073]

### 错误信息： ###

Mixed Content: The page at ‘https://wshop.xxx.com/wxshop/’ was loaded over HTTPS,

but requested an insecure image ‘http://wshop.xxx.com/wxshop//image/A3.jpg’.

This content should also be served over HTTPS.

### 报错原因： ###

HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]

#### 解决办法：CSP设置upgrade-insecure-requests ####

方法1：

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难，在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案，他的作用就是让浏览器自动升级请求。

在我们服务器的响应头中加入：（当然我操作不了服务器，下面还会介绍另一种解决办法）

方法2：

在页面中加入 meta 头：（我使用这个方法）

![在这里插入图片描述][cacf8b33e5b044a99c5b2d4430269b3b.png]  
(如果页面比较多，需要统一改变的话，我们可以将这条语句添加到全局JS文件里，全局调用)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70 1]  
方法3：

删除链接中的“https：”

这样的话系统就会自动的动态配置http 和 https。  
![在这里插入图片描述][39575646bda54eebaee4e442230b628d.png]

[https_blog.csdn.net_s_monster_article_details_88656073]: https://blog.csdn.net/s_monster_/article/details/88656073
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70]: /images/20221005/31ce4b399d4b4ff4af1c9a71cab15429.png
[cacf8b33e5b044a99c5b2d4430269b3b.png]: /images/20221005/3fe17a1effef494c8bcba22879c0e667.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTI5NTg3NA_size_16_color_FFFFFF_t_70 1]: /images/20221005/491f096c87df48dcbed3114a61cdba78.png
[39575646bda54eebaee4e442230b628d.png]: /images/20221005/c478107f0e3042a88d08ebd94a39a06e.png