问题背景:

项目之前传递token的方式，是通过cookie来传的。（cookie中的数据默认会跟着所有请求发送）因谷歌浏览器80版本之后，SameSite属性默认值改为Lax后，导致不同站下的cookie写不进去了。所以更改了传递token的方式，通过请求头传递。设置了axios的请求头后，其他的接口访问都没有问题，唯有图片这种直接通过src或者background:url()的方式。接口就加载请求了，加不上请求头。

解决方案

使用原生的XMLHttpRequest对象创建请求

background:url()方式

//react 代码如下
  componentDidMount () {
     // icon为请求接口地址 如：http://localhost:8080/files/download?fileName=photo/a.jpg
    const { icon } = this.props  
    this.getImage(icon)
  }
  
  getImage = (icon) => {
    let request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.open('get', icon, true);
    request.setRequestHeader('Authorization', '凭证信息'); 
    request.onreadystatechange = e => {
      if (request.readyState == XMLHttpRequest.DONE && request.status == 200) { 
          // this.refElement 表示的是html中的元素
           this.refElement.style.backgroundImage= `url(${URL.createObjectURL(request.response)})` ;
        }
    };
    request.send(null);
  }

   // render中的代码
   <span ref={ref => (this.refElement = ref)} />

img src方式

  componentDidMount () { 
    const { icon } = this.props  
    this.getImage(icon)
  } 
  getImage = (icon) => {
    let request = new XMLHttpRequest();
    request.responseType = 'blob';
    request.open('get', icon, true);
    request.setRequestHeader('Authorization', '凭证信息'); 
    request.onreadystatechange = e => {
      if (request.readyState == XMLHttpRequest.DONE && request.status == 200) { 
          this.refElement.src = URL.createObjectURL(request.response);
          this.refElement.onload = () => {
                URL.revokeObjectURL(this.refElement.src);
          } 
        }
    };
    request.send(null);
  }

   // render中的代码
   <img  ref={ref => (this.refElement = ref)} />

注：
URL.createObjectURL()
URL.revokeObjectURL()
参考：https://segmentfault.com/a/1190000020366227?utm_source=tag-newest