Ошибка CORS для добавления изображения из другого домена в jsPDF в Angular 8 - PullRequest
Новая
       11

Ошибка CORS для добавления изображения из другого домена в jsPDF в Angular 8

1 голос
/ 22 февраля 2020

Я хочу использовать некоторые изображения в 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 к своему URL, но я также получаю эту ошибку. 

img.crossOrigin = 'anonymous';

или img.crossOrigin = 'Anonymous';

Я также установил настройки cors в бэкэнде: 

CORS_ORIGIN_ALLOW_ALL = True

1 Ответ

1 голос
/ 22 февраля 2020

Для пояснения я создал codesandbox .

Я обычно добавляю свои изображения в виде base64-закодированных dataurls. Если изображения принадлежат другому домену (например, когда вы сохранили ссылку на изображение в своей базе данных), я конвертирую изображение на клиентскую сторону 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), вы можете установить свойство url, которое объявлено в data obj: 

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

Затем просто добавьте изображение: 

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

И ты готов.

...