当前栏目
分享 4个解决 https页面加载http资源报错的方法
改https初看起来,其实就是一个域名指向的问题,也许咱们只要将http的请求,直接跳转到https地址去,那么也就完成了https的切换。实际并非这么简单的。
由于https地址中,若是加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止,这就会给你带来资源不全的问题了,好比:图片显示不了,样式加载不了,js加载不了。
由于样式类,基本上都是写在本地的,因此通常还能够,可是一些公共的js文件,每每就是存在于cdn或者其余服务器上,这时候,若是访问不了,可能就致使了业务就彻底操做不了。好比:jquery效法加载失败,可能全部的操做、请求都将无效了。
如果一个https网站中的某个页面内容加载时请求了有js、css、图片和接口四个http协议的资源。就会出现报错信息:
module.exports = Config[Fix];
Mixed Content: The page at 'https://www.fly63.com/***/' was loaded over HTTPS,
but requested an insecure image 'http://www.fly63.co/***/img.jpg'.
This content should also be served over HTTPS.
这是由于HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错。
下面总汇几种解决方案,供大家参考。
方法1:服务端设置header
好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难,在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案,他的作用就是让浏览器自动升级请求。 在我们服务器的响应头中加入:(当然如果操作不了服务器,下面还会介绍另一种解决办法)。
header("Content-Security-Policy: upgrade-insecure-requests");
方法2:页面设置meta头
在页面中加入 meta 头:(我使用这个方法)
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
如果页面比较多,需要统一改变的话,我们可以将这条语句添加到全局JS文件里,全局调用。
方法三:删除链接中的http:
推荐方法,不指定具体协议,使用资源协议自适配,比如,当前为https页面,那么就是https资源,如果是http页面,那么就是http资源。具体方法超简单:
<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>
方式四:
最笨的方法,直接复制原有代码,写成两套代码,一套为http使用,一套为https使用,http和https各自指向各自服务。
相关文章
- 前端面试 【JavaScript】— typeof 是否能正确判断类型?
- 前端面试 【JavaScript】— instanceof 能否判断基本数据类型?
- 前端面试 【JavaScript】— 能不能手动实现一下 instanceof 的功能?
- 前端面试 【JavaScript】— Object.is和=== 有什么区别?
- 前端面试 【JavaScript】— JS中类型转换有哪几种?
- 前端面试 【JavaScript】— == 和 ===有什么区别?
- 前端面试 【JavaScript】— 对象转原始类型是根据什么流程运行的?
- JavaScript 的 parseInt() 函数
- javascript实现两个数字进行组合
- JS监听键盘按键
- 大前端开发中的路由管理之五:Flutter篇
- Javascript的DOM操作
- 在Vue项目中使用WebSocket技术
- 新手向:前端程序员必学基本技能——调试JS代码
- React 毁了 Web 开发!
- 「JS 逆向百例」cnki 学术翻译 AES 加密分析
- 商标注册域名后缀用什么?商标和域名有哪些区别?
- 网站建设流程是怎样的?需要看重哪些细节?
- 网站域名商标注册流程是什么?网站域名商标有什么用?
- 如何建设一个实用性强的网站 网站上线后如何运营