問題背景:

項目之前傳遞token的方式婚被，是通過cookie來傳的。（cookie中的數(shù)據(jù)默認會跟著所有請求發(fā)送）因谷歌瀏覽器80版本之后两芳，SameSite屬性默認值改為Lax后摔寨，導致不同站下的cookie寫不進去了。所以更改了傳遞token的方式怖辆，通過請求頭傳遞。設置了axios的請求頭后删顶，其他的接口訪問都沒有問題竖螃，唯有圖片這種直接通過src或者background:url()的方式。接口就加載請求了逗余，加不上請求頭特咆。

解決方案

使用原生的XMLHttpRequest對象創(chuàng)建請求

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