title: Access-control-allow-origin issue with image
body: <p>I'm trying to add an image from a different url using a function and im getting an issue with cors saying my request is blocked.</p>
  
  <p>I tried adding a cossOrigin attribute to the image and it still dosnt seem to work</p>
  
  <pre><code>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) {
  
   })
  </code></pre>
  
  <p>Access to image at 'imageurl' from origin '<a href="http://localhost:8000" rel="nofollow noreferrer">http://localhost:8000</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>