資訊專欄INFORMATION COLUMN
摘要：建議在調(diào)試階段用或者引入，在部署階段用相對(duì)協(xié)議，或者直接在本地建一個(gè)服務(wù)器，以服務(wù)器的形式打開頁面，就不會(huì)出現(xiàn)瀏覽器無法加載相對(duì)協(xié)議下的資源的情況了。
前幾天在做一個(gè)翻譯小應(yīng)用的時(shí)候，發(fā)現(xiàn)在安卓手機(jī)端可以正常運(yùn)行，而在蘋果手機(jī)和谷歌瀏覽器中不能正常運(yùn)行（可能safari和Chrome的內(nèi)核都是webkit內(nèi)核的原因，還是webkit內(nèi)核大法好^__^），電腦端有提示不安全提示，而手機(jī)端不會(huì)有任何提示。
demo地址：https://zdaoyang.github.io/tr...
上社區(qū)尋求答案后得知，是因?yàn)間ithub全站開啟了https，而在我的html頁面的head中，有一些資源是以http的形式引入的，如下圖
也就是說，如果你的主站點(diǎn)是https的，那么里面的所有資源就必須都要以https的形式引入，不然瀏覽器的安全機(jī)制就會(huì)把這部分資源block掉，導(dǎo)致無法正常運(yùn)行。
解決方案有以下幾種：將資源引入形式改成https
選擇相對(duì)協(xié)議，也就是說，將頭部的http/https去掉，只保留之后的部分，像這樣：
這樣的好處是瀏覽器能夠根據(jù)你的網(wǎng)站所采用的協(xié)議來加載文件。
但是，由于“相對(duì)協(xié)議”的相對(duì)特性，對(duì)于本地文件的訪問就有一個(gè)“坑”：比如，你在電腦上保存了一個(gè) index.html 的頁面，這個(gè)頁面中用相對(duì)協(xié)議引用了網(wǎng)絡(luò)上的某個(gè)外部資源，你直接用瀏覽器打開這個(gè)html文件是打不開的，因?yàn)槟銥g覽本地文件時(shí)，瀏覽器采用的是 file: 協(xié)議，file協(xié)議無法識(shí)別//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css這種類型的資源路徑，故打不開。
建議：在調(diào)試階段用http或者h(yuǎn)ttps引入，在部署階段用相對(duì)協(xié)議，或者直接在本地建一個(gè)服務(wù)器，以服務(wù)器的形式打開頁面，就不會(huì)出現(xiàn)瀏覽器無法加載相對(duì)協(xié)議下的資源的情況了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83856.html
摘要：但對(duì)于很多資源，則可以利用協(xié)議減少網(wǎng)絡(luò)負(fù)載。采用的是多進(jìn)程的資源加載機(jī)制。目前大多數(shù)瀏覽器都有磁盤緩存機(jī)制，因?yàn)榫彺鏅C(jī)制確實(shí)能夠提高網(wǎng)頁的加載速度。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號(hào)：愛寫bugger的阿拉斯加如有問題或建議，請(qǐng)后臺(tái)留言，我會(huì)盡力解決你的問題。 前言 此文章是我最近在...
摘要：書接上文瀏覽器之引擎本章主要講解瀏覽器安全機(jī)制的網(wǎng)頁的安全和瀏覽器的安全。總結(jié)瀏覽器的安全機(jī)制包括網(wǎng)頁安全模型和沙箱模型其中網(wǎng)頁安全模型就是利用了同源策略，讓不同域中的網(wǎng)頁不能相互訪問，當(dāng)然有好幾種瀏覽器跨域的方法可以其相互訪問。 showImg(https://segmentfault.com/img/remote/1460000016375575); 前言 此文章是我最近在看的【W(wǎng)...
摘要：協(xié)議發(fā)展協(xié)議是萬維網(wǎng)協(xié)會(huì)和工作小組合作的結(jié)果，他們最終發(fā)布了一系列的，定義了版本。無狀態(tài)是指協(xié)議對(duì)于事務(wù)處理沒有記憶能力。來說說無狀態(tài)是一個(gè)無狀態(tài)協(xié)議，這意味著每個(gè)請(qǐng)求都是獨(dú)立的。 什么是HTTP協(xié)議 引自Wikipediahttps://en.wikipedia.org/wiki...showImg(https://segmentfault.com/img/bVCsvk);超文本傳輸...
摘要：協(xié)議發(fā)展協(xié)議是萬維網(wǎng)協(xié)會(huì)和工作小組合作的結(jié)果，他們最終發(fā)布了一系列的，定義了版本。無狀態(tài)是指協(xié)議對(duì)于事務(wù)處理沒有記憶能力。來說說無狀態(tài)是一個(gè)無狀態(tài)協(xié)議，這意味著每個(gè)請(qǐng)求都是獨(dú)立的。 什么是HTTP協(xié)議 引自Wikipediahttps://en.wikipedia.org/wiki...showImg(https://segmentfault.com/img/bVCsvk);超文本傳輸...
閱讀 2173·2021-09-04 16:40
閱讀 1471·2021-08-13 15:07
閱讀 3612·2019-08-30 15:53
閱讀 3203·2019-08-30 13:11
閱讀 1082·2019-08-29 17:22
閱讀 1821·2019-08-29 12:47
閱讀 1481·2019-08-29 11:27
閱讀 2235·2019-08-26 18:42
