html2canvas 라이브러리 사용시 이미지 CORS에러 발생
우리는 사용자가 반려동물을 잃어버렸을 때 빠르게 포스터를 제작할 수 있는 기능을 추가하려고 했다. 기술은 많이 발전했음에도 아직까지 대부분의 사람들은 반려동물을 잃어버렸을 때 급하게 전단지를 프린트하여 거리에 붙이고 다닌다. 그래서 우리 팀은 포스터의 템플릿을 제공하고 빠르게 만들 수 있도록 하는 것이 목적이었다.
원인
하지만 포스터 기능과 관련하여 처음에는 사용자가 올린 실종된 반려동물의 게시글 정보를 서버에 저장하고, 그 저장된 정보를 다시 API 요청을 통해 받아와 html2canvas, file-saver를 이용하여 포스터를 이미지 파일로 만들고자 했다.
import domtoimage from "dom-to-image"
import saveAs from "file-saver"
...
const makeImageHandler = () => {
domtoimage.toBlob(document.querySelector(".poster")).then((blob) => {
saveAs(blob, "card.jpg");
});
};
...이 코드는 makeImageHandler 함수를 정의하여 해당 함수를 호출하면 dom-to-image 라이브러리를 사용하여 poster 클래스를 가진 요소를 이미지로 변환하고, 변환된 이미지를 file-saver 라이브러리의 saveAs() 함수를 사용하여 다운로드할 수 있게 한다. 하지만 백엔드에서 받아온 이미지 URL을 사용하면 CORS 에러가 발생한다. 그래서 첫 번째 대안으로는 서버에 있는 URL을 사용하지 않기 위해 포스터를 작성할 때 Store에 저장된 이미지를 포스터에 넣고 위 코드를 실행하려고 했다. 그러나 서버에 올려진 기존 게시물을 포스터로 만들어야 하는 경우도 있기 때문에 CORS 에러를 해결해야 한다.
해결
빠른 해결 방안으로, 유저 시나리오를 변경하여 기존 게시물 작성 정보 전체를 다시 받아오는 것이 아닌 "string" 정보만 받아오고 이미지는 사용자가 실종 게시물 작성 시 클라이언트 측에 저장하여 사용하는 방법으로 해결했다.
회고
우선 기능 웹 사이트를 배포할 날이 얼마 남지 않은 시점에서 문제가 발생했다. 백엔드 쪽에서는 와일드카드를 사용하여 모든 접속을 허용했음에도 에러가 발생했다. 시간이 촉박하여 CORS 에러를 직접 해결하는 것은 무리라고 판단했고, 급한 해결책으로 이미지를 클라이언트 측에 저장하여 해결했다. State에 저장하기 때문에 새로고침을 하면 이미지 파일이 사라지는 단점이 있다. 그렇기 때문에 사용자가 다시 포스터를 이미지 파일로 만들고 싶다면 만들 수 없는 단점이 생겼다..
결국 궁극적으로는 CORS 에러를 해결하는 것이 제일 좋은 방법이다..
