Vue關于訪問外鏈失敗的問題

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

這篇文章主要介紹了Vue關于訪問外鏈失敗的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

Vue訪問外鏈失敗

在公司項目中，點擊跳轉外部鏈接時，發(fā)現跳轉失敗，但是在瀏覽器訪問可以直接訪問，抱著求知欲的目的，查找資料得出一下結果，作為知識儲備吧。

軍工項目登錄跳轉到另一個項目的登錄中，window.open 可以直接打開百度，但是打不開要跳轉的登錄頁，但是直接在瀏覽器中可以直接訪問，猜想是否是對方對服務做了安全方面的處理或者限制，抱著這方面的考慮查找資料。

一個涉及安全和隱私的https請求頭中的字段—referrer，對方項目服務器為了防止別人盜取資源做了限制，一般打開頁面會有一個referrer，如果是從其他頁面跳轉過去，這個referrer會帶著原來的頁面地址，服務器檢測到之后就會限制訪問，將其設置為no-referrer就不會帶原頁面的地址，服務器會認為是直接在瀏覽器中輸入地址打開，就不會限制了。

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

什么是 referrer ？

當前頁訪問跳轉到目標頁，目標頁會在headers中收到 referrer 信息，referrer里面存儲的是用戶從哪個頁面跳轉到目標頁的信息，也就是說發(fā)起請求的時候，請求頭中帶有從哪個頁面來的信息，網站會將引用地址記錄以便追蹤用戶的動態(tài)或進行統(tǒng)計，大部分分析軟件也都會處理這個信息。一般會從兩方面去考慮：隱私和安全。

隱私

referrer 會攜帶url過去，里面有可能有一些用戶數據信息或者敏感信息有可能會暴露出去。

安全

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

1、通過Referrer-Policy HTTP header設置 Referrer-Policy: origin

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

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

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

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

Vue打開一個外部連接

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

在vue項目中，許多跳轉api都只是會更改uri，即域名后的地址，一個比較直觀的思路是location.href，但直接調用只是會在當前地址下追加一個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)
}