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

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

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.

这个报错非常常见，大概意思就是在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的

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

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

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