如果大家在開發(fā)Vue項目時遇到了有關(guān)Referrer Policy的問題缭贡，類似下面的情況：
那么這種問題就是Referrer Policy問題。首先我們先了解一下什么是Referrer Policy
Referrer簡介
簡單來說辉懒，Referrer 是HTTP協(xié)議中的一個請求報頭阳惹，用于告知服務(wù)器用戶的來源頁面。比如說你從Google搜索結(jié)果中點(diǎn)擊進(jìn)入了某個頁面眶俩，那么此次HTTP請求中的Referrer 就是Google搜索結(jié)果頁面的地址莹汤。如果你的某篇博客中引用了其他地方的一張圖片，那么對該圖片的HTTP請求中的Referrer 就是你那篇博客的地址颠印。
一般Referrer 主要用于統(tǒng)計纲岭，像CNZZ、百度統(tǒng)計等可以通過Referrer 統(tǒng)計訪問流量的來源和搜索的關(guān)鍵詞（包含在URL中）等等线罕，方便站長們有針性對的進(jìn)行推廣和SEO什么的
當(dāng)然Referrer 另一個用處就是防盜鏈了荒勇，主要是圖片和網(wǎng)盤服務(wù)器使用的較多。盜鏈的危害不言而喻闻坚，侵犯了版權(quán)不說，增加了服務(wù)器的負(fù)荷兢孝，卻沒有給真正的服務(wù)提供者帶來實際利益（廣告點(diǎn)擊什么的）窿凤。
另外注意的是，Referrer是瀏覽器為我們自動加上的跨蟹。
Referrer Policy簡介
Referrer Policy的作用就是的作用就是為了控制請求頭中referrer的內(nèi)容雳殊，目前是一個候選標(biāo)準(zhǔn)，不過已經(jīng)有部分瀏覽器支持該標(biāo)準(zhǔn)窗轩。
目前Referrer-Policy只包含以下幾種值：
-
no-referrer
整個 Referrer 首部會被移除夯秃。訪問來源信息不隨著請求一起發(fā)送。也就是說當(dāng)你訪問A頁面時痢艺，點(diǎn)擊了A頁面上的某個超鏈接進(jìn)入了B頁面仓洼，那么對B頁面訪問的請求頭中不會包含Referrer字段。 -
no-referrer-when-downgrade
在沒有指定任何策略的情況下用戶代理的默認(rèn)行為堤舒。在同等安全級別的情況下色建，引用頁面的地址會被發(fā)送(HTTPS->HTTPS)，但是在降級的情況下不會被發(fā)送 (HTTPS->HTTP)舌缤。即當(dāng)訪問的協(xié)議都是https時箕戳，對新訪問的頁面的請求頭中會包含舊頁面的全部鏈接某残，但是當(dāng)舊頁面的協(xié)議時https，新頁面的協(xié)議是http時陵吸，對新頁面的訪問的請求頭Referrer字段不會包含任何值玻墅。 -
origin
在任何情況下，僅發(fā)送鏈接的域名作為Referrer字段的值壮虫。例如 https://example.com/page.html 會將 https://example.com/ 作為Referrer的值澳厢。 - origin-when-cross-origin
對于相同域名的請求，會發(fā)送完整的URL作為Referrer的值旨指，但是對于非同源請求僅發(fā)送舊頁面的域名赏酥。 -
same-origin
對于同源的請求會發(fā)送舊業(yè)面全部URL，但是對于非同源請求則不發(fā)送舊頁面的全URL息谆构。 -
strict-origin
在同等安全級別的情況下滥搭，發(fā)送文件的域名作為引用地址(HTTPS->HTTPS)钾怔，但是在降級的情況下不會發(fā)送 (HTTPS->HTTP)。 -
strict-origin-when-cross-origin
對于同源的請求，會發(fā)送完整的URL读宙；不同源的請求在同等安全級別的情況下，發(fā)送文件的域名作為引用地址(HTTPS->HTTPS)褂始；在降級的情況下不發(fā)送此首部 (HTTPS->HTTP)景埃。 -
unsafe-url
無論是同源請求還是非同源請求，都發(fā)送完整的 URL（移除參數(shù)信息之后）作為引用地址粱哼。
示例
Vue中全局修改Referrer的方法
在項目的router.js文件中加入以下代碼：
let head = document.getElementsByTagName('head');
let meta = document.createElement('meta');
meta.name = 'referrer';
//根據(jù)實際情況修改referrer的值季二，可選值參考上文
meta.content = 'no-referrer';
head[0].appendChild(meta);
改變referrer的值重新運(yùn)行項目可以看到請求成功！
