缘由
因为项目需求,项目中引用了图片的网络链接,但是发现了很奇怪的问题,图片链接如果在浏览器的地址栏中可以直接打开,如果在前端项目的Img标签中却无法被渲染。
如何解决
在vue项目中的头部添加meta标签
在index.html中添加:<meta name="referrer" content="no-referrer">
或者在img标签中添加:<img referrerpolicy="no-referrer" src="xx"/>
Referrer是什么
- Referer是http请求header的一部分,当浏览器向Web服务器发送请求的时候,请求头信息一般包含referer。该属性的作用就是告诉服务器这个链接是从哪个页面链接过来的,服务器就可以基于此信息进行处理。
Referre作用
- 防盗链:顾名思义就是防止别人复制链接盗取资源,原理就是,服务器再接受访问静态资源的请求时,会判断Referer值是否是自己的网站地址。
- 防止恶意请求:比如静态请求是.html结尾的,动态请求是.shtml,那么所有的*.shtml请求,必须 Referer为我自己的网站才可以访问,这就是Referer的作用。
防盗链的两种方式
- 允许空Referrer:允许Referer为空,意味着你允许比如浏览器直接访问,就是空。
- 不允许空Referer:意味着,发送请求必须携带referrer属性。
最后
所以,只要能在浏览器中打开的网络链接图片,其网站设置的防盗链就是允许为空的Referrer。
建议使用这种方式渲染网络图片,如果是在vue项目中的meta属性中,添加可能会影响项目的其他请求。