图像的访问控制允许来源问题答案

【问题标题】：Access-control-allow-origin issue with image图像的访问控制允许来源问题
【发布时间】：2019-12-30 12:56:09
【问题描述】：

我正在尝试使用函数从不同的 url 添加图像，但我遇到 cors 的问题，说我的请求被阻止。

我尝试向图像添加 cossOrigin 属性，但它似乎仍然无法正常工作

function getDataUri(url, callback) {
          var image = new Image();
          image.crossOrigin = "Anonymous"

          image.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
            canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

            canvas.getContext('2d').drawImage(this, 0, 0);

            // Get raw image data
            // callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

            // ... or get as Data URI
            callback(canvas.toDataURL('image/png'));
          };

          image.src = url;
        }

 getDataUri(imageurl, function (dataURI) {

 })

CORS 策略已阻止从源“http://localhost:8000”访问“imageurl”处的图像：请求的资源上不存在“Access-Control-Allow-Origin”标头。

【问题讨论】：

浏览器试图通过拒绝您的请求代码来保护您，因为来自 URL 的响应没有必要的标头，例如错误指定该资源可以跨源使用
URL 是否需要发送该标头才能正常工作？或者是否可以告诉浏览器不关心某个 url？
您请求的主机必须设置 CORS 策略。您可以先从服务器端获取图像，然后将它们提供给客户端以解决此问题。

标签： javascript reactjs image cors

【解决方案1】：

我总是这样做：image.setAttribute('crossOrigin', '');

【讨论】：