本地服务访问图片列表，图片403问题解决

现象：

本地开发图片列表，图片访问403，显示不出来

css背景图片请求报错403

img请求正常

原因：

403是防止盗链的错误（这种设计，是api厂商正常保证自己的服务器不被刷流量）

解决：

方法一：使用no-referrer
这种方案不仅针对图片的防盗链,还可以是其他标签.
1.头部添加一个meta

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

2.对应的标签上添加属性

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>

<!-- element 标签的referrer -->

 <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :preview-src-list="srcList"
      :initial-index="4"
       :referrerpolicy='no-referrer'
      fit="cover"
    />

referrerpolicy:'no-referrer'

referrer-policy

原生属性 referrerPolicy

3. 访问OSS时出现403状态码的排查方法-阿里云

第一种方案不好用，访问背景图仍报403，问了下后台，公司用的是OSS图片资源，于是找到了下面的资料

 阿里云后台配置：