使用htmlToImage时，请求的资源上没有'Access-Control-Allow-Origin'标头 [英] No 'Access-Control-Allow-Origin' header is present on the requested resource while using htmlToImage

问题描述

我正在尝试使用htmlToImage方法，但显示错误访问地址为"/aws图片网址/源"http://localhost:4200"的源已被CORS策略阻止:所请求的资源上没有"Access-Control-Allow-Origin"标头.如果不透明的响应满足您的需求，请将请求的模式设置为"no-cors"，以在禁用CORS的情况下获取资源."

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."

我在 img 标签中使用的图片网址来自aws s3存储桶.在AWS s3上，我们已经配置了CORS

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. 允许的起源为"*".
2. 允许标题为"*".

注意:

1. 这在 firefox浏览器中工作正常，但在 chrome浏览器和 Opera浏览器中无效.
2. 当我在浏览器选项卡中打开生成的base64时，图像不会显示.只有空白来了.

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.

我的html代码是:

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

而js代码是:

    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.

推荐答案

如果要显示base 64图像，则需要在模板中使用该URL之前对其进行清理.

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);
}

这篇关于使用htmlToImage时，请求的资源上没有'Access-Control-Allow-Origin'标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！