加载Oss图片跨域问题

问题

在开发html2canvas生成海报的需求时，海报中引入的图片是Oss存储的图片发现偶尔会出现跨域的报错

解决

首先想到的问题来源便是html2canvas产生的问题,解决方法也很简单,添加useCORS属性允许跨域并在img上加上crossOrigin属性

 html2canvas(element, {
      useCORS: true, //是否尝试使用CORS从服务器加载图像
      scale: 3,
      dpi: 300
    }).then(function (canvas) {
      const result = document.getElementById('posterResult')
      result && result.appendChild(canvas)
      // setShowImg(false)
    })

    <img
        src={`${avatar}?x-oss-process=image/resize,m_fixed,h_100,w_100`}
        alt='avatar'
        crossOrigin='anonymous'
      />

但以为万无一失的时候,打包到线上的时候偶尔还是会出现跨域的问题,结果发现但网络比较慢的时候,竟然又出现跨域问题。

首先理解一下为什么会出现跨域,当你的页面中引用的图片来自一个不同域名的服务器，并且该服务器没有设置允许跨域请求的 HTTP 头信息，那么浏览器就会阻止从该服务器返回的数据被显示在当前网页中，从而出现跨域错误。

但实际上Oss上的图片资源服务端已经允许了跨域了,会出现跨域问题,则是因为浏览器发现该图片请求超时，就意味着此次请求失败，当前页面无法正常加载该图片资源,就无法获取HTTP头中的允许跨域请求信息,就当成跨域处理了。

解决方法则是在图片地址上添加随机数,当请求失败时，浏览器会重新发送请求。 原理则是浏览器的机制触发的，如果带有图像、URL和时间戳的请求超时，浏览器可能会认为请求失败，并自动尝试重新发送请求。这可能会导致多次重复请求，特别是在网络连接不稳定或服务器响应时间较长的情况下。

 <img
        src={`${avatar}?x-oss-process=image/resize,m_fixed,h_100,w_100&t=new Date().getTime()`}
        alt='avatar'
        crossOrigin='anonymous'
  />