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