公眾號(hào)文章的圖片在第三方網(wǎng)站展示，如下圖所示：
原因：
這是因?yàn)槲⑿殴娖脚_(tái)，為了保護(hù)原創(chuàng)內(nèi)容的版權(quán)和安全，對(duì)圖片做了相應(yīng)的安全識(shí)別，也就是對(duì)圖片采用了防盜鏈處理。微信對(duì)外提供了AP接口，我們可以通過授權(quán)的方式獲取到自己公眾號(hào)里面的文章，但是微信的圖片默認(rèn)是不允許外部調(diào)用的。因此當(dāng)我在第三方平臺(tái)展示時(shí)就會(huì)出現(xiàn)“此圖片來自微信公眾平臺(tái)未經(jīng)允許不可引用”這個(gè)問題。
原理：
瀏覽器根據(jù)圖片的鏈接去請(qǐng)求圖片所在的服務(wù)器，以此來獲取圖片的內(nèi)容。在http協(xié)議的請(qǐng)求頭中，有個(gè)Referer字段，這個(gè)Referer字段就是請(qǐng)求圖片的網(wǎng)頁(yè)地址，這個(gè)字段是可選的。客服端發(fā)送請(qǐng)求的時(shí)候，可以自主決定是否加上該字段，而對(duì)于瀏覽器來說，一般都會(huì)加上這個(gè)字段，因此，瀏覽器會(huì)自動(dòng)在請(qǐng)求頭中帶上這個(gè)包行URL的網(wǎng)頁(yè)地址。當(dāng)微信服務(wù)器發(fā)現(xiàn)圖片請(qǐng)求中攜帶的Referer不是來自微信的域名時(shí)，就會(huì)直接返回一張“此圖片來自微信公眾平臺(tái)...”的圖片。這樣做可以防止其他網(wǎng)站使用自家的圖片從而浪費(fèi)自家的寬帶，從而降低自身資源的消耗，而在Web開發(fā)領(lǐng)域，這被稱為“防盜鏈”。
f0988277-f3dd-4bde-9572-ea8856197a2e.png
方法1：
將公眾號(hào)文章圖片上傳到服務(wù)器，圖片鏈接更換為我們自己服務(wù)器的鏈接
方法2:
Referer字段是可選的，那么不讓瀏覽器傳這個(gè)字段給微信圖片服務(wù)器即可
<meta name="referer" content="no-referrer">
需要注意問題：
<meta name="referer" content="no-referrer>會(huì)導(dǎo)致百度統(tǒng)計(jì)失效原因：因?yàn)榘俣冉y(tǒng)計(jì)的“hm.js”文件服務(wù)只有在檢測(cè)到請(qǐng)求中Referrer以后才會(huì)返回正確的js資源，否則會(huì)響應(yīng)空的內(nèi)容。所以如果項(xiàng)目中有百度統(tǒng)計(jì)，則應(yīng)該使用如下所示動(dòng)態(tài)添加meta的方法
解決辦法：
動(dòng)態(tài)添加meta。等百度統(tǒng)計(jì)的js資源請(qǐng)求成功以后，再使用js將meta添加到head中。
<script>
(function(){
let meta = document.createElement('meta');
meta.content = 'no-referrer';
meta.name = 'referrer';
document.getElementsByTagName('head')[0].appendChild(meta);
console.log(document.getElementsByTagName('head'))
})()
</script>
