Vue關于訪問外鏈失敗的問題如何解決

這篇文章主要介紹了Vue關于訪問外鏈失敗的問題如何解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue關于訪問外鏈失敗的問題如何解決文章都會有所收獲，下面我們一起來看看吧。

Vue訪問外鏈失敗

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

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

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

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

什么是 referrer ？

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

隱私

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

安全

referrer 為了安全考慮不把一些用戶信息或者敏感信息暴露出去，我們就要使用 Referrer-Policy來規范 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協議中，才有referrer的存在。

Vue打開一個外部連接

記錄一個開發中不太起眼的bug

在vue項目中，許多跳轉api都只是會更改uri，即域名后的地址，一個比較直觀的思路是location.href，但直接調用只是會在當前地址下追加一個url，所以正確的做法是

  <el-table-column prop="gaintestMp4" label="步態視頻" >
      <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)
}

關于“Vue關于訪問外鏈失敗的問題如何解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue關于訪問外鏈失敗的問題如何解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。