定制软件解决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即可。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发