项目在本地环境测试后，将项目部署到阿里云服务器。初始默认使用HTTP协议，Chrome浏览器地址框显示：不安全。如果网站仅内部使用，那没什么事，可对外开放，网民自然对该网站保持的不信任。对SEO收录网站是否影响不知道，不过过于醒目的提示，实在不能忍。

幸好，阿里云有免费SLL证书，需要主动申请，使用期限一年，次年可以再续。本着白要白不要原则，将HTTP升级到HTTPS，再次打开网站。

Mixed Content: The page at 'https://www.didaolan.cn/'  was loaded over HTTPS, but requested an insecure  element 'http://www.didaolan.cn/dist/css/style.css'. This  request was automatically upgraded to HTTPS, For  more information see  https://blog.chromium.org/2019/10/no-more-mixed- messages-about-https.html

在Console框查看到错误信息，由于升级到HTTPS，引入的资源依旧还是使用HTTP,导致资源不能正常被引用进来。最简单的方法，手动将http全部改成https。可SLL证书到期后，HTTPS又会自动降级到HTTP,为了兼容意外情况，可直接省略协议前缀，交由浏览器自动识别，如：

HTML<link href="//www.didaolan.cn/dist/css/style.css?v=2021032901" rel="stylesheet" type="text/css">

对于静态资源可以手动修改，那动态资源呢？一般网站，建站时间久，历史等原因，数据库保存的数据都是http引用的附件资源，不可修改数据库的情况下。下载前，直接用JS替换地址。

JS/**
 * 规换Https
 * @method replacehHttps
 * @param {String} url 链接地址
 * @return {String}
 */
var replaceHttps = function (url) {
    if(document.location.protocol == 'https:') {
        return url.replace('http://','https://');
   }

   return url;
}

使用replaceHttps函数：

JSvar url = 'http://www.didaolan.cn/dist/css/style.css'
var newUrl = replaceHttps(url);

console.log(newUrl);
//https://www.didaolan.cn/dist/css/style.css

原则上HTTPS调用HTTP资源受到限制，HTTP调用HTTPS资源不受限制，所以只需要考虑HTTPS调用资源的应用场景。