解决Mixed Content: The page at https://xxx was loaded over HTTPS

背景：现有一个项目,网站访问地址示例为 https://www.testcase.com,其中某个功能需要用到外部的服务（例如http:42.192.36.246/api/api.js），并且这个服务是http的并且不能修改。当我们访问https://www.testcase.com的页面时候调用这个http的服务就出现了以下错误。

Mixed Content: The page at 'https://www.testcase.com' was loaded over HTTPS, but requested an insecure frame 'http:47.108.xxx.xx/api/api.js'. This request has been blocked; the content must be served over HTTPS.

错误原因分析：

HTML页面是通过HTTPS加载的，但是其他资源文件（如图片，视频，样式表文件，脚本）是使用HTTP方式加载的。之所以称为混合内容，是因为在一个网页中同时使用了HTTP和HTTPS，而最初的请求方式为 HTTPS。

现代浏览器可能会阻止此类内容，或者显示关于此类内容的警告，提醒用户此页面包含不安全的内容。阻止混合内容的浏览器可能会首先尝试将该内容的连接从HTTP “升级”到HTTPS。

解决方法：

1、治标不治本法：适用于个人调试时使用

解决思路：对浏览器进行设置，允许浏览器加载“不安全内容”，以谷歌浏览器版本 102.0.5005.115（正式版本） （64 位）为例

        进入设置页面-----点击网站设置----更多内容设置---不安全内容---允许显示不安全内容---添加，将你访问的网站（例如www.testcase.com）添加进去即可，之后打开f12查看，虽然还是会出现灰色的mixed conten提示，但是已经不是红色的保存，而且我们的http地址的资源已经成功引入。适用于个人调试，因为生产环境不可能让用户去进行浏览器设置。

 

 2.方法二：nginx代理法

        解决思路：将我们所需要的http服务或者资源使用nginx反向代理成https服务，我们项目中则使用https引入，nginx接收到请求后再转发到实际的http地址。

        比如我们放的https://www.testcase.com这个示例网站的前端是nginx部署的，那么我们可在nginx的配置文件下找到监听的443端口添加内容。

 

这句话的意思是将 https://www.testcase.com/api/XXX的所有请求转发到http:42.192.36.246/api/XXX。

那么现在我们将前端项目中原来http:42.192.36.246/api/api.js的地址更换为https://www.testcase.com/otherapi/api.js即可。