Web - H5 - 解决下载图片跨域问题

在互联网，没有绝对的安全！

这个就是写这篇文章的最大感受~

代码实现

首先什么也别说，先来看看 能够直接看代码：

function getImgBlob(imgUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.setAttribute('crossorigin', 'anonymous') // 允许图片跨域
    img.setAttribute('referrerpolicy', 'no-referrer'); // 不用带 referer 所有的防止外链的行为都会失效
    img.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.height = img.height
      canvas.width = img.width
      const ctx = canvas.getContext('2d')
      ctx.drawImage(img, 0, 0, img.width, img.height)
      canvas.toBlob(b => resolve(b))
    }
    img.onerror = err => reject(err)
    img.src = imgUrl
  })
 }

这里的代码很简单。大概意思就是：用 Promise 包了一层；然后动态创建了一个 img 标签；利用标签 src 没有同源的限制，实现了跨域；最后利用 img 标签在请求的时候是否携带请求凭证，然后实现 破——解——图——片防盗链 的校验。

其实图片防盗链，主要就是校验请求的来源，当我们把请求的来源取消掉以后，后端就没有校验了，也就是相当于绕过去了！

总结

感觉这是一个小小的问题，但是足足困扰了我两天。很多时候解决问题的办法就是一两行代码的事情，但是突破这行代码需要的可能是双倍的汗水！