首页/ 填坑/ 文章详情

HTTPS调用HTTP资源:This request was automatically upgraded to HTTPS

项目在本地环境测试后,将项目部署到阿里云服务器。初始默认使用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调用资源的应用场景。

文章评论0 records

最新 最早

0

最新评论Latest comments

胖螺胖螺 02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!
强哥强哥 2021-12-08 15:49
怎么看文章作者是谁呀?
big2catbig2cat 2021-08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪