Angular2: error No 'Access-Control-Allow-Origin' header

Hi folks,
I am trying to save <img> as an image file. I am using the library: https://github.com/tsayen/dom-to-image

photo.component.html

<div class="row" id="photo-holder">
 <img id="image" src="{{imgUrl}}" class="img-responsive"/>
</div>
<button md-raised-button (click)="savePhoto()">Save</button>

photo.component.ts

declare var domtoimage:any;
...
imgUrl = amazon/s3/bucket/path/image.png;
savePhoto() {
    domtoimage.toBlob(document.getElementById('photo-holder'))
      .then(function (blob) {
        saveAs(blob, 'savedPhoto.png');
      });
  }

I added CORS configuration for S3 bucket:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
 <AllowedOrigin>*</AllowedOrigin>
 <AllowedMethod>GET</AllowedMethod>
 <ExposeHeader>Accept-Ranges</ExposeHeader>
 <ExposeHeader>Content-Range</ExposeHeader>
 <ExposeHeader>Content-Encoding</ExposeHeader>
 <ExposeHeader>Content-Length</ExposeHeader>
 <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
 <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Result:

XMLHttpRequest cannot load http://amazon/s3/bucket/path/image.png. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:4200’ is therefore not allowed access.

I also tried to clean the caches, but still no luck.
Any suggestion is appreciated.

I took a glimpse of the dom-to-image and it doesn’t rely on XMLHttpRequest. It generates the image from existing dom. Probably you need to figure out why it’s calling ajax again.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.