Vue關(guān)于訪(fǎng)問(wèn)外鏈?zhǔn)〉膯?wèn)題如何解決

這篇文章主要介紹了Vue關(guān)于訪(fǎng)問(wèn)外鏈?zhǔn)〉膯?wèn)題如何解決的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue關(guān)于訪(fǎng)問(wèn)外鏈?zhǔn)〉膯?wèn)題如何解決文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

Vue訪(fǎng)問(wèn)外鏈?zhǔn)?/h3>

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

軍工項(xiàng)目登錄跳轉(zhuǎn)到另一個(gè)項(xiàng)目的登錄中，window.open 可以直接打開(kāi)百度，但是打不開(kāi)要跳轉(zhuǎn)的登錄頁(yè)，但是直接在瀏覽器中可以直接訪(fǎng)問(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ì)限制訪(fǎng)問(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è)訪(fǎng)問(wèn)跳轉(zhuǎn)到目標(biāo)頁(yè)，目標(biāo)頁(yè)會(huì)在headers中收到 referrer 信息，referrer里面存儲(chǔ)的是用戶(hù)從哪個(gè)頁(yè)面跳轉(zhuǎn)到目標(biāo)頁(yè)的信息，也就是說(shuō)發(fā)起請(qǐng)求的時(shí)候，請(qǐng)求頭中帶有從哪個(gè)頁(yè)面來(lái)的信息，網(wǎng)站會(huì)將引用地址記錄以便追蹤用戶(hù)的動(dòng)態(tài)或進(jìn)行統(tǒng)計(jì)，大部分分析軟件也都會(huì)處理這個(gè)信息。一般會(huì)從兩方面去考慮：隱私和安全。

隱私

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

安全

referrer 為了安全考慮不把一些用戶(hù)信息或者敏感信息暴露出去，我們就要使用 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)
}

關(guān)于“Vue關(guān)于訪(fǎng)問(wèn)外鏈?zhǔn)〉膯?wèn)題如何解決”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue關(guān)于訪(fǎng)問(wèn)外鏈?zhǔn)〉膯?wèn)題如何解決”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。