背景:现有一个项目,网站访问地址示例为 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。文章来源:https://www.toymoban.com/news/detail-400207.html
那么现在我们将前端项目中原来http:42.192.36.246/api/api.js的地址更换为https://www.testcase.com/otherapi/api.js即可。文章来源地址https://www.toymoban.com/news/detail-400207.html
到了这里,关于解决Mixed Content: The page at https://xxx was loaded over HTTPS的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!