场景
最近公司项目需求中涉及到需要引用微信朋友圈中的图片资源，结果被腾讯的防盗链系统拦截，所有的图片都变成了令人尴尬的模样。今天咱们讨论的主题即看我如何习得化解之法
防盗链请求头
再反手又是一个new tab，键入图片url，F12
新开窗口请求
这样对比看的话就很清楚了，两者不同之处再Request Headers里面的Referer请求头，关于Referer，引用MDN的解释：
The Referer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example.
大概意思就是说Referer包含请求发起者的URL，这样腾讯方就可以拿到请求源相关信息，然后根据请求源URL来进行判断校验，这样就可以知道请求方是否在盗链
不过如此，哈哈哈...
但是，怎么破？绝望。。。
解决方案
目前常用方法无外乎两种，第一种是通过第三方跳板服务：
这些服务一般多是通过后端代理的方式暴露出跳板api，使用方在调用时通过传参的方式将要请求的url传到代理服务器，代理服务器作为中间方再去请求腾讯资源代理服务器的图片资源，拿到资源后返还给调用方，之前有一些稳定的跳板服务，比如QQ浏览器（一家人应该不会有问题）提供的
http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=
在上述链接后面给出原始图片的url，然后就可以坐等QQ跳板服务为我们取回想要的图片
然鹅。。。
QQ浏览器也加了防盗链校验
果然是一家人。。。
只能尝试第二种方式了
第二种方案就是让浏览器发图片请求时，请求头不带上Referer头信息。像这种控制代理动作，一般通过meta标签来进行设置，最终在meta找到了想要的
referrer controlling the content of the HTTP Referer HTTP header attached to any request sent from this document:
referrer取值
参考上面的取值含义，我们只需要在所需页面的<head>中加上:
<meta name="referrer" content="no-referrer" />
效果图
Referer没了，图片也正常显示了[手动滑稽笑脸]
Tips
- 细心的朋友会发现，html的meta设置属性为referrer，而http请求头里面却是referer，原因是早期http标准制订的那一波同仁，将referrer拼错为referer[手动尴尬]，后续版本为了兼容以前版本，不得已一错再错
- 盗链可耻，如果非商用项目可以尝试下本文提到的方案
- 既然写到这里，帮朋友打个广告，广告见上图，需要者联系：HAIYU-JIANG，坐标杭州融创·河滨之城
网友评论