"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调用阻止了请求。

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

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