异常信息:
图片地址直接在浏览器里打开始可以访问的,但是放到img标签的src里进行访问就会报错,查看控制台请求发现是403 Forbidden, 可能是触发了防盗链
解决方案:
- 在HTML代码的head中添加一句
<meta name="referrer" content="no-referrer" />
即可,或者给标签单独添加referrer
<meta name="referrer" content="no-referrer" />
<!-- a标签的referrer -->
<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>
<!-- img/image标签的referrer -->
<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>
http请求体的header中有一个referrer字段,用来表示发起http请求的源地址信息,这个referrer信息是可以省略但是不可修改的,就是说你只能设置是否带上这个referrer信息,不能定制referrer里面的值,服务器端在拿到这个referrer值后就可以进行相关的处理,比如图片资源,可以通过referrer值判断请求是否来自本站,若不是则返回403或者重定向返回其他信息,从而实现图片的防盗链。上面出现403就是因为,请求的是别人服务器上的资源,但把自己的referrer信息带过去了,被对方服务器拦截返回了403。
隐藏referrer信息后,图片资源可以正常访问了
关于referrer policy(来源策略),具体可以设置哪些值以及对应的结果可以参考这里:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy