背景
当我们访问一个网站，如果网页出现 HTTPS 和 HTTP 的混合请求，则会触发 Chrome 浏览器的警告导致无法加载资源。例如本站升级为 HTTPS 访问，但是资源都通过 HTTP 访问云服务商的对象存储时，控制台就会有如下错误：
Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure element '<URL>'. This request was automatically upgraded to HTTPS, For more information see <URL>
看提示知道，该页面是由 HTTPS 加载，但是页面里有的 url 是不安全的HTTP请求，Chrome 自动将该请求升级为 HTTPS 的方式请求。而我的对象存储还没升级成 HTTPS 访问所以获取资源失败
解决方案
更新所有不安全的资源链接
相当于将所有 http 请求修改为 https 请求，需要第三方服务支持
使用相对协议链接
如果资源的主机同时支持 HTTP 和 HTTPS，可以使用相对协议链接，这样资源会使用当前页面的协议。如果资源存放在相同页面主机，且主机同时支持HTTP 和 HTTPS，可以考虑下面的方式
示例：
<!-- 使用相对协议 -->
<img src="//example.com/image.jpg">修改服务器配置
可以在服务器配置中添加重定向规则，将所有 HTTP 请求重定向到 HTTPS。相当于后台的 nginx 进行反向代理，将所有 HTTPS 请求反向代理到 HTTPS 端口，前提是你的资源文件跟页面在一个服务器
使用 Content Security Policy (CSP)
通过 Content Security Policy 头部来限制页面加载的资源，只允许通过 HTTPS 加载内容。这种方式等同于强制所有请求走 https，如果像本站的情况，因为对象存储暂时不支持 https 所以也不能解决问题
示例：
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:;">总结
一句话总结：页面的请求能用 HTTPS 就用 HTTPS。浏览器不推荐混用的方式
同时也给我们一个提示，当前端代码里调用其他第三方服务的时候，确保所有的请求都是同一种 HTTP 协议类型，虽然不是所有的浏览器都会对禁用这种混合请求方式（例如 safari）如果第三方不能提供 HTTPS 的调用则尽量不用该服务
评论区