CORS错误试图将远程图像转换为Bas64数据[重复]

Question

我需要将一个远程图像转换成bas64给定其URL，但我运行在CORS错误，不知道如何工作。

在这个问题上，我遵循了一些解决方案：如何使用javascript将图像转换为base64字符串

我的示例图是：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无法加载https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg.请求的资源上不存在访问控制允许起源标头。因此，http://stackoverflow.com的来源不允许访问。

方法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)} );

在'https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg“起源”http://stackoverflow.com'已被CORS策略阻止：请求的资源上不存在'Access Control Allow Origin'标头。起源'http://stackoverflow.com因此，不允许访问。

还尝试了：

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时失败，原因是：

顺便说一句，我不确定CORS的政策到底在保护什么。假设存在某种可能触发攻击的恶意负载。我们仍然在DOM中加载和显示图像，为什么要信任由同一endpoint设置的CORS头？

有人知道解决这个问题的办法吗？

谢谢你的帮助。

Answer 1

通过CORS代理提出请求，您可以绕过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响应头

添加了Access-Control-允许-Origin标头的响应是浏览器看到的，因此浏览器允许您的前端代码访问响应，并且您不会得到任何CORS错误。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS解释了发生了什么，导致需要配置请求发送到的服务器，以便它发送必要的CORS标头，或者在两者之间放置一个代理来为您添加CORS标头（如上所述）...

与此答案中的代码片段中使用第三方代理不同，您可以非常轻松地使用来自的代码设置自己的CORS代理https://github.com/Rob--W/cors-anywhere/ 或诸如此类。

顺便说一句，我不确定CORS的政策到底在保护什么。

在这种情况下，它根本没有真正保护任何东西，因为您可以使用任何服务器端编程语言或公共代理或curl或其他任何东西来https://blog.xenproject.org/wp-content/uploads/2014/10/Testing.jpg。

维护者https://blog.xenproject.org 正确的做法是让他们的服务器自行配置，以发送一个访问控制允许源站响应头，告诉浏览器允许从任何源站获取他们的内容。但既然他们没有，你只需要使用一个代理。

CORS限制真正有用的唯一情况是用于运行在intranet上或某种防火墙后面的资源。因为在内联网/防火墙的情况下，让任意web应用程序以与内联网/防火墙内的用户相同的权限运行不是一个好主意。