javascript - "dom-to-image"图片跨域

Question

如果图片不是本地文件，则会出现如下错误:

这是 VUE 中的 dom-to-image:

shareClick(){
   this.shareLoading = true;
   let capture = document.getElementById("capture");

   domToImage.toBlob(document.getElementById('capture')).then((blob)=>{
       var img = new Image();
       img.crossOrigin = "anonymous";
       img.onload = () =>{
          img.src = dataUrl;
          capture.innerHTML = '';
          capture.appendChild(img);
          this.shareLog = false;
          this.shareLoading = false;
        }
    })
 },
//domToImage CODE end

Answer 1

问题是由于缺少 Access-Control-Allow-Origin: * header 引起的在远程服务器上，导致 AJAX 调用阻止请求。

如果您有权访问远程服务器，您可以添加缺少的 header (作者就是这样做的)。另一种选择是使用 JSONP(如果支持)获取远程图像并通过回调将检索到的数据传递给 img.src。

最后一个选择是使用 CORS 代理从不允许跨脚本访问的服务器获取数据，通过另一个允许跨脚本访问的服务器。可以在 this Stack Overflow Q&A 中找到一个很好的概述。 .