https加载http不安全脚本提示解决方案

https加载http不安全脚本提示解决方案

   点关注不迷路，欢迎再来！

精简博客内容，尽量已专业术语来分享。
努力做到对每一位认可自己的读者负责。
帮助别人的同时更是丰富自己的良机。

最近在工作中遇到https加载http页面时浏览器会有不安全脚本提示，为了提升客户体验，需要绕过这个不安全脚本加载提示。

https是当下的网站的主流趋势，有些大公司则完全要求用户必须使用https地址。然而对于以前http链接来说，我们往往就存在一个兼容性问题，不可能达到一次性的切换，应该在很长一段时间内https与http将共存。改https初看起来，其实就是一个域名指向的问题，也许我们只要将http的请求，直接跳转到https地址去，那么也就完成了https的切换。实际并不是这么简单的。

浏览器拦截示例

1.chrome

2.firefox

3.IE

ie浏览器需要启用安全设置中的显示混合内容。

出现不安全脚本加载提示原因

因为https地址中，如果加载了http资源，浏览器将认为这是不安全的资源，将会默认阻止，这就会给你带来资源不全的问题了，比如：图片显示不了，样式加载不了，JS加载不了。因为样式类，基本上都是写在本地的，所以一般还可以，但是一些公共的js文件，往往就是存在于cdn或者其他服务器上，这时候，如果访问不了，可能就导致了业务就完全操作不了。比如：jquery效法加载失败，可能所有的操作、请求都将无效了。（举例：https的项目A页面加载http的服务器B时，浏览器就会进行拦截，出现加载不安全脚本提示）

解决方案

将http请求直接跳转至https请求，是一种解决办法，而且很多公司都是这么干的，比如百度什么的，但是前提是，你所有的服务都已切换https完成。
　　1. 最笨的方法，直接复制原有代码，写成两套代码，一套为http使用，一套为https使用，http和https各自指向各自服务。（本人开始就采用此方法，丢脸，但是后期会出现冲突问题，果断放弃）
　　2. 推荐方法，不指定具体协议，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。
　　3.在request请求头部加标签（简单粗暴）

// meta tag
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests

笔记心得

解决此问题前，建议先了解下https协议有助于理解和区分https与http区别与联系。