图片地址403的问题

今天遇到一个问题，就是html中通过img中src属性引入一个图片地址，开始浏览器是显示的，之后报错了。重新拿图片地址复制到地址栏中打开，却能看到图片。解决办法是在html中head标签中添加下面的代码

    <meta name="referrer" content="no-referrer" />

下面说一下原理。

请求图片的时候发送了一个http请求，这个http请求体的header中有个referrer字段，用来表示发起http请求的源地址信息。这个referrer信息是可以省略但不能修改，就是你可以设置是否携带上这个referrer信息，不能定制referrer里面的值。服务器在拿到这个referrer值后进行处理，通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片或者其他资料的盗取。问题出现403 就是因为请求的是别人服务器上的资源，默认的把自己referrer信息带过去了，被对方服务器拦截了，出现403的报错。在前端可以通过meta标签来设置referrer policy（来源策略），就是把referrer设置成no-referrer,这样发送请求的时候就不会带上referrer信息，对方的服务器就无法拦截了。添加这个meta标签后，图片显示正常了。