作者：biaochenxuying

轉發鏈接：https://github.com/biaochenxuying/blog/issues/31

問題

筆者網站的圖片都是上傳到第三方網站上的，比如 簡書、掘金、七牛云上的，但是最近簡書和掘金都開啟了 防盜鏈，防止其他網站訪問他們網站上的圖片了，導致筆者的網站存在他們網站上的圖片全掛了。

具體問題，就是 html 中通過 img 標簽引入一個第三方的圖片地址，報 403 。但是這個圖片地址直接復制出來在地址欄打開，卻是看得到的。

原因

官方輸出圖片的時候，判斷了來源 Referer ，就是從哪個網站訪問這個圖片，如果是你的網站去加載這個圖片，那么 Referer 就是：你的網站地址；

如果我們的網站地址不在官方的白名單內，所以就看不到圖片了。

我們做這個跳板的關鍵：不發送 Referer，也就是沒有來源。那么官方那邊，就認為是從瀏覽器直接訪問的，所以就能加載正常的圖片了。

referrer

在某些情況下，出于一些原因，網站想要控制頁面發送給 server 的 referrer 信息的情況下，可以使用這一 referer metadata 參數。

參數

referer 的 metedata 屬性可設置 content 屬性值為以下集合：

• never
• always
• origin

結果

• 如果 referer-policy 的值為 never：刪除 http head 中的 referer；
• 如果 referer-policy 的值為 default：如果當前頁面使用的是 https 協議，而正要加載資源使用的是普通的 http 協議，則將 http header 中額 referer 置為空；
• 如果 referer-policy 的值 origin：只發送 origin 部分；
• 如果 referer-policy 的值為 always：不改變 http header 中的 referer 的值；

舉例

如果頁面中包含了如下 meta 標簽，所有從當前頁面中發起的請求將不會攜帶 referer：

如果頁面中包含了如下 meta 標簽，則從當前頁面中發起的 http 請求將只攜帶 origin 部分：

解決方案

初步方案

• 在 標簽里加 meta，referrer 的 content 設置為 nerver

這樣存在第三方網站上的圖片，在你的網站上就可以訪問了。

但是還有一個問題，就是如果你的網站需要發送你的網站地址的，那上面的的設置就不行了，比如：用到了百度統計。

那上面的設置會導致百度統計的代碼加載不了，因為它需要發送你的網站地址給百度統計。

既要不發送 你的網站地址，又要發送你的網站地址，那么怎么辦呢 ？

最終的解決方案

• 先在 html 上設置 referrer 為 always

這樣之后，首屏加載的時候，加載了百度統計的代碼了，能正常統計訪客數據了。

• 不需要網站地址的時候，再把 referrer 設置為 nerver

加個延時 setTimeout 再把 referrer 的 content 值設置為 nerver 。或者 在有圖片的地方再把 referrer 的 content 值設置為 nerver 。

const referrer = document.getElementById("referrer");referrer.setAttribute("content", "never")

這樣就能解決第三方圖片防盜鏈，又能用到百度統計了。

最后

希望：大家不要惡意盜用、濫用第三方的 CDN 資源行為。

比如：掘金 CDN 本是一件公益性質的社區服務，為便大家在自己的技術博客中使用掘金 CDN 的圖片，并沒有開啟防盜鏈。

但是就是因為某些人惡意盜用、濫用第三方的 CDN 資源，所以掘金社區不得不開啟防盜鏈來減少損失和規避風險 https://juejin.im/post/5cefb6a3f265da1b95703b9d

作者：biaochenxuying

轉發鏈接：https://github.com/biaochenxuying/blog/issues/31

總結

以上是生活随笔為你收集整理的https访问http加载不出图片_前端解决第三方图片防盗链的办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。