先說下解決方法：
-
在HTML代碼的head中添加一句，
另外除了全局mate标簽外也可以
a标簽的referrer
img/image标簽的referrer
<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/> <image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>
後面再說下原理。
http請求中的referrer
http請求體的header中有一個referrer字段，用來表示發起http請求的源位址資訊，這個referrer資訊是可以省略但是不可修改的，就是說你隻能設定是否帶上這個referrer資訊，不能定制referrer裡面的值。
伺服器端在拿到這個referrer值後就可以進行相關的處理，比如圖檔資源，可以通過referrer值判斷請求是否來自本站，若不是則傳回403或者重定向傳回其他資訊，進而實作圖檔的防盜鍊。上面出現403就是因為，請求的是别人伺服器上的資源，但把自己的referrer資訊帶過去了，被對方伺服器攔截傳回了403。
在前端可以通過meta來設定referrer policy(來源政策)，具體可以設定哪些值以及對應的結果參考這裡。是以針對上面的403情況的解決方法，就是把referrer設定成no-referrer，這樣發送請求不會帶上referrer資訊，對方伺服器也就無法攔截了。
浏覽器中referrer預設的值是no-referrer-when-downgrade，就是除了降級請求的情況以外都會帶上referrer資訊。降級請求是指https協定的位址去請求http協定，是以上面403的情況還有另一種解決方法就是，請求的圖檔位址換成http協定，自己的位址使用http協定，這樣降級請求也不會帶上referrer。
nginx配置圖檔防盜鍊
最後再說一下這種根據referrer攔截，在伺服器如何配置。我自己伺服器用的nginx，這裡就說下nginx的配置。首先打開nginx的配置檔案:conf/nginx.conf，在server下面添加如下:
location ~* \.(gif|jpg|png|jpeg)$ {
valid_referers none valid.url.com;
if ($invalid_referer) {
return 403;
}
}
首先第一句以檔案格式字尾比對出圖檔資源路徑，然後通過valid_referers添加合法的referer位址，加上none，表示沒有傳referer也是合法的，最後referer不合法的情況傳回403。如果想跳其他位址或傳回其他圖檔資源可以這樣：rewrite xxx.xxx.com/xxx.jpg。
orgin
http頭部中還有一個與referrer類似的叫orgin的字段，在發送跨域請求或預檢請求(preflight request)時會帶上這個參數，他用來表示發起請求的伺服器位址，這個參數是必定會傳的，然後伺服器端用此字段來判斷是否允許跨域。
referrer的幾種狀态
方法二: 代理圖檔
(不支援gif圖檔,使用第一種方案是沒有gif效果的,隻能顯示靜态圖檔.)
使用images.weserv.nl方案
小程式
getImage(url){
console.log(url);
// 把現在的圖檔連接配接傳進來，傳回一個不受限制的路徑
if(url !== undefined){
return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=');
}
}
把圖檔路徑直接傳進去,替換一下原來url的http/https.或者直接在圖檔url前加上https://images.weserv.nl/?url=
如:
原圖檔的http://是可以省略的(與上面的getImage函數是一樣的結果)