Как избежать 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;