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

标簽在請求的時候是否攜帶請求憑證，然後實作

破——解——圖——片防盜鍊

的校驗。

其實圖檔防盜鍊，主要就是校驗請求的來源，當我們把請求的來源取消掉以後，後端就沒有校驗了，也就是相當于繞過去了！

總結

感覺這是一個小小的問題，但是足足困擾了我兩天。很多時候解決問題的辦法就是一兩行代碼的事情，但是突破這行代碼需要的可能是雙倍的汗水！