Cropperjs를 이용해서 이미지를 자르고 있는 중에 계속 CORS 에러가 나고있었다.
그래도 사실... 이미지가 잘리길래 그냥 무시를 하고 있었는데 점점 실배포가 다가오고 있어서(곧 QA 시작) 백엔드 쪽에 아래의 링크를 주면서 해결을 부탁했다.
여러가지를 찾아봤을 때 S3에서 이미지를 가져올 때 발생하는 CORS 에러는 아마존 쪽에서도 우리의 잘못이 아니라고 하고 구글 쪽에서도 우리의 잘못이 아니라고 하는 아주... 애매한 문제였는데,
쟤네들끼리 싸우는 건 내 알빠쓰레빠가 아니고 나는 당장 이미지를 갖고와서 짤라야 된다고요...
지난주 금요일에 저 링크를 전달한 다음에 S3쪽에 관련한 규칙을 추가했다고 했는데 캐시 문제도 있고 해서 완전히 적용이 되기까지는 시간이 좀 걸리니 월요일날 확인해보자고 하고는 퇴근했다가 오늘 출근해서 확인해보니,
에러는 사라졌는데 이미지가 안 짤려!!!
tained canvas 라면서 blob도 DataURL도 아무것도 뺄 수 없어!!!
규칙을 추가했는데 왜요!!!
월요일 아침부터 울면서 다시 구글에 "tainted canvas CORS error" 쳐서 검색하고는 모든 페이지 다 읽던 중에 아래의 깃허브 이슈를 발견했다.
Failed to execute 'toDataURL' Tainted canvases may not be exported
이 이미지가 나를 살렸다...
이미지가 로드되는 img 태그에 crossOrigin="anonymous"를 추가하고 Cropper 태그에서는 crossOrigin={false} 를 제거했더니 정상동작하게 되었다!
