chrome等浏览器中https网站报blocked:mixed-content错误解决方案

2021-04-21 18:10 栏目:技术开发 查看(12588)

有人反馈网站网站打开的时候页面错乱,之前还是好好的,但突然打开就错位了,打开网络请求一看发现这样的错误:

QQ截图20210421174033

再看下控制台就是这样的错误:

Mixed Content: The page at ‘https://xxx’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://xxx’. This request has been blocked; the content must be served over HTTPS.

QQ截图20210421174453

这个报错非常常见,大概意思就是在https页面中请求http资源会被阻止,应该通过https来访问资源。

实际上在IE等浏览器上即便是在https中请求http的资源一样是可以访问的,然而在chrome等浏览器中是不可以的。那么如何解决这个问题呢?下面提供两种方法来解决:

方法一:把页面内的资源请求路径改造成为https

这是一种非常直观的改造方式,一般来讲也很简单,只需要在开发过程中我们所有的资源路径使用相对路径即可,比如根目录路径用一个ROOT常量代替;这样只需要修改这个常量的值即可。然而事实上文章开头的案例实际上设计开发过程的初衷也是使用https的,然而为什么突然间就成了http的呢?可以参考微构网络团队另外的一篇文章《为何网页中资源的路径一会是http一会是https?》。

方法二:在网页头部用meta标签声明。

根据一些公开的资料表面,只需要在html网页head部分添加如下代码即可:

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

大概的意思就是让浏览器自动转变对资源的请求方式,强制把页面所有的http请求自动变成https请求。这样一处理后我们可以看下有什么变化。

首先用最简单的右键查看源代码方式查看输出的前端页面原始信息,我们会发现页面中引用的资源路径是http的

QQ截图20210421180545

一般来讲,这种情况下浏览器去请求这些资源的时候自然是用http去请求的,然而加上上面一行代码的作用就是告诉浏览器你给我强制请求https的资源。于是我们查看网络请求就可以看到所有的资源请求均变成了https。

QQ截图20210421180807

关于这种方式大家可以访问一篇名为《How to Disable Mixed Content Security Warning in Google Chrome》的文章,是外国朋友写的,写得很详细,原文地址如下:

https://thehackernews.com/2015/04/disable-mixed-content-warning.html

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:chrome等浏览器中https网站报blocked:mixed-content错误解决方案 - 微构网络
分享: