javascript - No 'Access-Control-Allow-Origin' header is present on the requested resource while using htmlToImage

Question

I am trying to use htmlToImage method but is is showing error "Access to fetch at " / aws image url / " from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

The image url which I am using in img tag, is coming from aws s3 bucket. And on AWS s3 we have already configured CORS

1. AllowedOrigins as "*".
2. AllowedHeaders as "*".

Note:

1. This is working fine in firefox browser but not working in chrome browser and Opera browser.
2. When I am opening genrated base64 in browser tab, the image is not coming. only blank is coming.

My html code is :

<div id="editedimage">
   <img class="img-style" src="<imgUrl>" alt="image"> 
<div>

And js code is :

    var node = document.getElementById('editedimage');
    htmlToImage.toPng(node)
      .then((dataUrl) => {
        console.log("url", dataUrl);
      .catch((error) => {
      console.error("error", error);
      });

Team, Help me out. Thanks in advance.

Answer 1

If you want to display base 64 image you need to sanitize the url before using it in template.

import { DomSanitizer } from '@angular/platform-browser';

constructor( private sanitizer: DomSanitizer, .... ) {
    this.displayImage = this.sanitizer.bypassSecurityTrustUrl("data:Image/*;base64,"+imageData);
}