通路圖檔出現403的解決方法

在寫小程式的時候,通路一個網址擷取圖檔,但是顯示會出現403(防止盜鍊)的錯誤.

總結了一下,有兩種方法是可以解決這個問題的:

• 使用

  images.weserv.nl

  方案

• no-referrer

第一種:使用

images.weserv.nl

1 2 3 4 5 6 7

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=

如:

https: //images.weserv.nl/?url=http://img.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg

原圖檔的

http://

是可以省略的(與上面的

getImage

函數是一樣的結果)

https: //images.weserv.nl/?url=mg.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg

第二種:使用

no-referrer

這種方案不僅針對圖檔的防盜鍊,還可以是其他标簽.

在前端頁面頭部添加一個

meta

<meta name= "referrer" content= "no-referrer" />

　　a标簽的

referrer

<a href= "http://example.com" referrer= "no-referrer|origin|unsafe-url" >xxx</a>

img/image标簽的referrer

<img referrer= "no-referrer|origin|unsafe-url" src= "{{item.src}}" /> <image referrer= "no-referrer|origin|unsafe-url" src= "{{item.src}}" ></image>

　　

說明

如果我們是通路的gif圖檔,使用第一種方案是沒有gif效果的,隻能顯示靜态圖檔.這個時候推薦大家使用第二種.親測可以完美展示gif效果.

–補充—

經過試驗,不是多有gif網站都支援第二種方式,還是有些會失敗.請大家自行試驗.如果有更好的方法可以一起交流.