快捷導(dǎo)航

Vue關(guān)于訪問(wèn)外鏈?zhǔn)〉膯?wèn)題

更新時(shí)間：2023年03月11日 08:40:08 作者：YaoZhanHui

這篇文章主要介紹了Vue關(guān)于訪問(wèn)外鏈?zhǔn)〉膯?wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

Vue訪問(wèn)外鏈?zhǔn)?/h2>
在公司項(xiàng)目中，點(diǎn)擊跳轉(zhuǎn)外部鏈接時(shí)，發(fā)現(xiàn)跳轉(zhuǎn)失敗，但是在瀏覽器訪問(wèn)可以直接訪問(wèn)，抱著求知欲的目的，查找資料得出一下結(jié)果，作為知識(shí)儲(chǔ)備吧。

軍工項(xiàng)目登錄跳轉(zhuǎn)到另一個(gè)項(xiàng)目的登錄中，window.open 可以直接打開(kāi)百度，但是打不開(kāi)要跳轉(zhuǎn)的登錄頁(yè)，但是直接在瀏覽器中可以直接訪問(wèn)，猜想是否是對(duì)方對(duì)服務(wù)做了安全方面的處理或者限制，抱著這方面的考慮查找資料。

一個(gè)涉及安全和隱私的https請(qǐng)求頭中的字段—referrer，對(duì)方項(xiàng)目服務(wù)器為了防止別人盜取資源做了限制，一般打開(kāi)頁(yè)面會(huì)有一個(gè)referrer，如果是從其他頁(yè)面跳轉(zhuǎn)過(guò)去，這個(gè)referrer會(huì)帶著原來(lái)的頁(yè)面地址，服務(wù)器檢測(cè)到之后就會(huì)限制訪問(wèn)，將其設(shè)置為no-referrer就不會(huì)帶原頁(yè)面的地址，服務(wù)器會(huì)認(rèn)為是直接在瀏覽器中輸入地址打開(kāi)，就不會(huì)限制了。

解決方案：在index.html 中添加 <meta name="referrer" content="no-referrer"/>

什么是 referrer ？

當(dāng)前頁(yè)訪問(wèn)跳轉(zhuǎn)到目標(biāo)頁(yè)，目標(biāo)頁(yè)會(huì)在headers中收到 referrer 信息，referrer里面存儲(chǔ)的是用戶從哪個(gè)頁(yè)面跳轉(zhuǎn)到目標(biāo)頁(yè)的信息，也就是說(shuō)發(fā)起請(qǐng)求的時(shí)候，請(qǐng)求頭中帶有從哪個(gè)頁(yè)面來(lái)的信息，網(wǎng)站會(huì)將引用地址記錄以便追蹤用戶的動(dòng)態(tài)或進(jìn)行統(tǒng)計(jì)，大部分分析軟件也都會(huì)處理這個(gè)信息。一般會(huì)從兩方面去考慮：隱私和安全。

隱私

referrer 會(huì)攜帶url過(guò)去，里面有可能有一些用戶數(shù)據(jù)信息或者敏感信息有可能會(huì)暴露出去。

安全

referrer 為了安全考慮不把一些用戶信息或者敏感信息暴露出去，我們就要使用 Referrer-Policy來(lái)規(guī)范 referrer 可以返回什么樣的內(nèi)容

1、通過(guò)Referrer-Policy HTTP header設(shè)置 Referrer-Policy: origin

2、通過(guò)<meta>元素改變Referrer Policy，直接修改名為referrer的內(nèi)容 <meta name="referrer" content="no-referrer"/>

3、通過(guò)給 <a>, <area>, <img>, <iframe>, 或者<link>元素設(shè)置referrerpolicy="origin"屬性

4、通過(guò)給 <a>, <area>, <img>, <iframe>, 或者<link> 元素設(shè)置 rel="noreferrer"屬性不顯示信息

備注：只有在https協(xié)議中，才有referrer的存在。

Vue打開(kāi)一個(gè)外部連接

記錄一個(gè)開(kāi)發(fā)中不太起眼的bug

在vue項(xiàng)目中，許多跳轉(zhuǎn)api都只是會(huì)更改uri，即域名后的地址，一個(gè)比較直觀的思路是location.href，但直接調(diào)用只是會(huì)在當(dāng)前地址下追加一個(gè)url，所以正確的做法是

? <el-table-column prop="gaintestMp4" label="步態(tài)視頻" >
? ? ? <template #default="scope">
? ? ? ?<el-button ?v-show="scope.row.gaintestMp4" @click="handleMp4(scope.row.gaintestMp4)"></el-button>
? ? ? ?
? ? ? </template>
? ? </el-table-column>
?
?
const handleMp4=(mp4:string):void=>{
? location.href=`http://${mp4}`
? // console.log("?? ~ file: backstage.vue:54 ~ handleMp4 ~ mp4", mp4)
}