项目中用 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 请求,一旦出现就是提示或报错
解决方案:
- 将http请求转化为https
如果在https网站中请求的http资源本身就支持https,可以在html页面加入,浏览器在解析请求的时候会自动把http请求转化为https请求。 不过这个方法有个弊端,他会将所有的http请求都转化为https请求。 - 预先将资源部署到自己的服务器上
如果在https网站中请求的http资源本身不支持https,并且这些被请求的http资源都是静态资源(比如js、css等),可以考虑把这些资源下载下来放到现有的https服务器中。 - 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
|