在 Angular 8 中的 jsPDF 中添加来自另一个域的图像时出现 CORS 错误

Question

我想在 jsPdf 中使用一些图像。这些图像来自另一个域（API）。这是我的代码：

let img = new Image();
img.src = 'myUrl';
docPdf.addImage(img, 'JPEG', col, row, width, height, 'FAST');

但我收到此错误：

Access to image at 'http://127.0.0.1:8000/some-url' from origin 'http://127.0.0.1:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

ERROR Error: Supplied Data is not a valid base64-String jsPDF.convertStringToImageData 
at Object.x.convertStringToImageData (jspdf.min.js:50)

然后我将 crossOrigin 添加到我的网址，但我也收到该错误。

img.crossOrigin = 'anonymous';

或 img.crossOrigin = '匿名';

我还在后端设置了cors设置：

CORS_ORIGIN_ALLOW_ALL = True

Answer 1

如果您的后端已经接受所有来源，并且您正在设置img.crossOrigin = 'anonymous'，您可以尝试向图像 URL 添加随机参数：

img.src = imgUrl + '?r=' + Math.floor(Math.random()*100000);

看起来浏览器已经缓存了您的图像，但它不会让任何 JavaScript 从磁盘读取它。在 imageURL 中添加一个随机参数，它将错过浏览器缓存的图像并从服务器重新下载它。

Answer 2

为了澄清起见，我创建了一个codesandbox。

我通常将图像添加为 base64 编码的 dataurl。如果图像来自不同的域（例如当您将图片的链接存储在数据库中时），我将使用以下方法将图片转换为 baset64 客户端：

toDataURL(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.onload = function() {
        var reader = new FileReader();
        reader.onloadend = function() {
          callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
      };
      xhr.open("GET", url);
      xhr.responseType = "blob";
      xhr.send();
    },

在该created()方法中（或者当您需要将图像转换为 base64 时），您可以设置在数据 obj 中声明的 url 属性：

created() {
    this.toDataURL(this.imgUrl, data => {
      this.imgAsBase64 = data;
    });
  }

然后只需添加图像：

doc.addImage(this.imgAsBase64, "jpg", 10, 10);

你完成了。