Fabric The image element contains cross-origin data, and may not be loaded

Question

When a color tint is applied to the canvas object it triggers an error

react-dom.development.js:4091 Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.

Image loaded to Fabric Canvas without error, it can be rotated and resized. Its a PNG image I created.

fabric.util.loadImage(
  event.target.src,
  function (img) {
    var fab_image = new fabric.Image(img, {
      id: event.target.id
    });
    wallCanvas.add(fab_image);
    wallCanvas.renderAll();
  },
  { left: 100, top: 100, angle: 0, opacity: 1 },
);

Applying the filter tint triggers the error

var canvas2dBackend = new fabric.Canvas2dFilterBackend();
fabric.filterBackend = canvas2dBackend;
fabric.filterBackend = fabric.initFilterBackend();

var colorButton = document.querySelector('#select-color');

var filter = new fabric.Image.filters.BlendColor({
  color: colorButton.style.background,
  mode: 'tint',
  alpha: 0.5,
});

wallCanvas
  .getActiveObjects()
  .forEach(function (obj) {
    obj.filters[16] = filter;
    obj.filters.push(filter);
    var resizefilter = new fabric.Image.filters.Resize();
    obj.filters.push(resizefilter);
    obj.applyFilters();
  });
wallCanvas.renderAll();

The bucket CORS rule

resource "aws_s3_bucket_cors_configuration" "cdn" {
  bucket = aws_s3_bucket.cdn.bucket

  cors_rule {
    allowed_headers = ["*"]
    allowed_methods = ["GET"]
    allowed_origins = ["*"]
    max_age_seconds = 3000
  }
}