今天看到一个案例网站，用户反馈说这个网站在chrome浏览器下，偶尔使用https访问页面错乱，结果查看网络请求发现js和css资源是http请求。于是自然就报如下错误：

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资源，而禁止访问http资源，应该改成https请求。

但实际上这个网站在绝大多数情况下访问是正常的，js和css等资源请求方式也都是https的。那么为什么有时候莫名其妙的会出现http呢？通过简单分享后发现了是由如下因素造成的：

1、该网站可以同时支持http和https的访问，并没有强制用户访问https或http，也就是统一为一种请求方式。

2、网站前端模板是由后端通过动态的逻辑生成且缓存下来的，且后台生成资源路径决定使用http还是https是通过$_SERVER['REQUEST_SCHEME']（php语法规则写法）动态获取的。于是大多数用户使用宣传中的https访问网站，模板文件中资源路径自然缓存为https的；但是少量的用户使用http访问网站，但网站逻辑上并没有强制用户跳转到https，于是如果刚好到了需要进行页面缓存的时间段，模板文件中的资源路径自然就缓存为http的。

基于上面两个因素，当个别时间模板文件中的资源路径如果刚好是由访问http的用户访问请求是生成且缓存的，当用户使用https访问网站的时候就出现了上面这种情况了。

那么如何解决这种问题呢？下面提供两种解决方案。

1、强制网站访问https

也就是如果用户访问http，通过服务器端配置，让用户自动跳转使用https请求访问网站，这样自然就没有使用http的情况发生，缓存的文件中的资源路径也就不可能出现http请求路径了。

2、通过相对协议路径

通常我们在引用一个资源路径的时候，都会通过http://或https://来定义，这样的话就是规定了我这个资源是用http或者https请求，相当于给规定死了。但是实际上我们可以直接写成//,也就是直接忽略掉https还是http协议。这样在前端浏览器就会自动执行类似后端$_SERVER['REQUEST_SCHEME']（php语法规则写法）的作用，给请求加上当前访问的请求协议了。如果当前请求是http就以http请求资源，反之https也是同样的道理。这种方式在很多网站都会出现这种写法，也是一种不错的方式。