网络 - 在HTTPS 网页中引入HTTP资源： Mixed Content

项目中用 iframe 加载了一个http资源，原先网站服务器配置的是http协议，所以可以顺利加载资源，现在项目升级用了https协议，这个http资源就无法加载了。

Mixed Content: The page at xxx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'xxx'. This request has been blocked; the content must be served over HTTPS.

报错原因：

HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，一旦出现就是提示或报错

解决方案：

1. 将http请求转化为https
   如果在https网站中请求的http资源本身就支持https，可以在html页面加入，浏览器在解析请求的时候会自动把http请求转化为https请求。
   不过这个方法有个弊端，他会将所有的http请求都转化为https请求。
2. 预先将资源部署到自己的服务器上
   如果在https网站中请求的http资源本身不支持https，并且这些被请求的http资源都是静态资源（比如js、css等），可以考虑把这些资源下载下来放到现有的https服务器中。
3. nginx代理
   如果在https网站中请求的http资源是动态资源（比如请求http接口），且是第三方接口（自己无法变更这个第三方接口是http协议的事实），可以用nginx代理的方式。

后续：

补充一点，方案1用的代码是 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">但这只是将协议升级，如果https下没有对应的资源，那么这个方案也是不管用的。
如果https有对应的资源，但是不想用上面那个方法，可以用相对路径 /xx,浏览器会根据当前协议自动补充 https://xxx。

不过最好的解决方案，还是nginx做一层代理，最后还是选了第三种方案。这就需要后端处理，前端没法搞。

参考链接：
Https网站中请求Http内容
Mixed Content:the page