解决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即可。

解决Mixed Content: The page at https://xxx was loaded over HTTPS相关推荐

解决Mixed Content:the page at‘https://‘ was loaded over HTTPS,but requested an insecure resource ‘http
解决Mixed Content:the page at'https://' was loaded over HTTPS,but requested an insecure resource 'http ...
JS错误:Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an insecure 新的问题
文章目录 JS错误:Mixed Content: The page at 'https://XXX' was loaded over HTTPS, but requested an insecure ...
解决Mixed Content: The page at https://* was loaded over HTTPS, but requested an insecure XMLHttpReque
目录项目场景问题描述原因分析解决方案一些问题项目场景 https协议的网站下请求http的资源问题描述 https协议的网站请求http协议的资源被浏览器任务不安全,请求被拦截并且报了以 ...
错误:Mixed Content: The page at ‘https://XXX’ was loaded over HTTPS, but requested an in...
在使用Tomcat+Nginx时.Nginx使用https,Tomcat使用http.使用iframe之类框架,在重定向时会出现以上问题导致页面加载不出来.这是因为Tomcat不知道Nginx发来的是 ...
Mixed Content: The page at“https://xxx”was loaded over HTTPS, but requested an insecure
一,现象接口请求通,查看network 二,原因 https的服务不可以请求http的接口,如果必须要使用,那么就需要在自己的服务器上做反向代理.
vue项目高德地图Mixed Content: The page at ‘https://****.com/cockpit/‘ was loaded over HTTPS, b
vue项目高德地图引入https相关报错 vue项目中高德地图引入相关问题原因和解决方案 vue项目中高德地图引入相关问题公司年前一个vue项目一期,其中有个数据可视化模块引入了高德地图,年前发布 ...
html页面和手机比例一致一比一自适应 Mixed Content: The page at ‘xxx‘ was loaded over HTTPS, but requested an insec
1. HTML页面与手机端一比一适应这行代码是一比一自适应,目的是让手机端看见的网页和在电脑上看见的相同,不写这一行会导致手机上的网页特别小. 原因是电脑显示的是px和手机上像素单位不一致,在< ...
http请求https报错：Mixed Content: The page at ‘xxx‘ was loaded over HTTPS, but requested an insecure...
当我们的浏览器出现类似"was loaded over HTTPS, but requested an insecure resource/frame"这种错误是,一般都是因为我们 ...
Mixed Content: The page at 'https://m.ctrip.com/webapp/dingzhi/v3_index' was loa
部门在https 改造中遇到的这个问题, Mixed Content: The page at 'https://m.ctrip.com/webapp/dingzhi/v3_index' was lo ...

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

解决Mixed Content: The page at https://xxx was loaded over HTTPS相关推荐

最新文章

热门文章