CORS錯誤試圖將遠程圖像轉換爲base64數據

Question

我需要將遠程圖像轉換爲base64給定其URL，但我遇到CORS錯誤，不知道如何解決。

我已經按照一些關於這個問題的解決方案：How to convert image into base64 string using javascript

我的例子形象是：https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg

方法1（的FileReader）：

function toDataUrl(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onload = function() { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 
     callback(reader.result); 
    } 
    reader.readAsDataURL(xhr.response); 
    }; 
    xhr.open('GET', url); 
    xhr.responseType = 'blob'; 
    xhr.send(); 
} 

toDataUrl('https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg', function(data) { console.log(data)}); 

這會產生錯誤：

XMLHttpRequest cannot load https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://stackoverflow.com ' is therefore not allowed access.

方法2（畫布）

function toDataUrl(src, callback, outputFormat) { 
    var img = new Image(); 
    img.crossOrigin = 'use-credentials'; 
    img.onload = function() { 
    var canvas = document.createElement('CANVAS'); 
    var ctx = canvas.getContext('2d'); 
    var dataURL; 
    canvas.height = this.height; 
    canvas.width = this.width; 
    ctx.drawImage(this, 0, 0); 
    dataURL = canvas.toDataURL(outputFormat); 
    callback(dataURL); 
    }; 
    img.src = src; 
    if (img.complete || img.complete === undefined) { 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
    img.src = src; 
    } 
} 
toDataUrl('https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg', function(data) { console.log(data)}); 

可生產嘗試加載圖像時，類似的錯誤：

​​3210

與也試過：

img.crossOrigin = 'anonymous'; 

，得到了相同的結果。

方法3（帆布使用img元素）：

img = document.createElement('img'); 
img.onload = function() { 
    var canvas = document.createElement('CANVAS'); 
    var ctx = canvas.getContext('2d'); 
    var dataURL; 
    canvas.height = this.height; 
    canvas.width = this.width; 
    ctx.drawImage(this, 0, 0); 
    dataURL = canvas.toDataURL('image/jpg'); 
    console.log(dataURL); 
}; 
img.src = 'https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg'; 

這樣至少加載圖像，但未能上調用toDataURL有：

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. at HTMLImageElement.img.onload (:9:22)

順便說一句，我不確定CORS政策在此保護的是什麼。假設有某種可能觸發漏洞的惡意負載。我們仍然在DOM中加載和顯示圖像，爲什麼我們會相信由同一端點設置的CORS頭？

有沒有人知道這個問題的任何解決方案？

感謝您的任何幫助。

Answer 1

您可以通過您的申請通過CORS proxy，這樣避開CORS限制：

var proxyUrl = 'https://cors-anywhere.herokuapp.com/', 
    targetUrl = 'https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg' 
toDataUrl(proxyUrl + targetUrl, 
    function(data) { console.log(data)}); 

代理將請求發送給targetUrl，那麼它獲得響應恢復，並在後，增加了Access-Control-Allow-Origin響應標題&需要任何其他CORS響應標頭，最後將其傳遞迴您的請求代碼。

加入的Access-Control-Allow-Origin標題的響應是瀏覽器所看到的，因此瀏覽器可讓您的前端代碼訪問響應，並且不會收到任何CORS錯誤。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS解釋發生了什麼事情，導致需要配置服務器請求正在發送，以便它發送必要的CORS頭，或者在它們之間放置代理以爲您添加CORS頭（如上所述以上）。

而不是像這個答案中的代碼片段那樣使用第三方代理，您可以使用https://github.com/Rob--W/cors-anywhere/等代碼輕鬆設置您自己的CORS代理。

---

As an aside, I'm not sure exactly what the CORS policy is protecting against here.

在它不是真正的保護免受任何東西，因爲你可以使用任何服務器端編程語言或公共代理或curl或任何得到https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg這種特殊情況下。

https://blog.xenproject.org的維護人員應該正確配置自己的服務器，以發送Access-Control-Allow-Origin響應標頭，告訴瀏覽器允許從任何來源獲取其內容。但由於他們不這樣做，你只需要使用代理。

CORS限制真正有用的唯一情況是資源在Intranet上運行，或者在某種防火牆後運行。因爲在Intranet /防火牆的情況下，讓任意Web應用程序以與Intranet /防火牆內用戶相同的權限運行並不是一個好主意。