Как избежать Cors ошибки?

Проект на реакте, мне с бекенда поступает ссылка на изображение и дата его создания, мне нужно дать возможность пользователю скачать это изображение с уже написанной датой на верху. Нашел библиотеку для данного действия html-to-image, но вот в чем беда, отображаю в компоненте DownloadModal пользователю предварительно картинку и текст, показывает нормально но вот при скачивании картинки изображения нет, только текст из-за Cors ошибки. Как решить данную проблему не обращаясь к бекенду? В инете увидел несколько тем с добавлением аттрибута на img tag crossorigin="anonymous" на сторонних изображениях это сработало, но вот на моем сервере это видимо не настроено

import { toPng } from "html-to-image";

const DownloadModal = (props) => {
  const ref = useRef(null);

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return;
    }

    toPng(ref.current, { cacheBust: true })
      .then((dataUrl) => {
        const link = document.createElement("a");
        link.download = "my-image-name.png";
        link.href = dataUrl;
        link.click();
      })
      .catch((err) => {
        console.log(err);
      });
  }, [ref]);

  return (
    <>
      <div className="wrapper_download" ref={ref}>
        <p className="text_on_image">{props.data}</p>
        <img
          src={props.source.src}
        />
      </div>
      <button onClick={onButtonClick}>Click me</button>
    </>
  );
};

export default DownloadModal;

Ответы (0 шт):