[React.js] html2canvas cors 에러

1. html2canvas cors
   • html2canvas라이브러리는 쉽게말해서 div를 이미지로 변환해주는 라이브러리다.
     • 변환 방향은 (1)div-> (2)canvas-> canvas.dataUrl->image
   1. cors 에러
      • 원인 : div에서 canvas로 변환하는 과정에서 canvas는 로컬이미지가 아닌 다른 도메인의 이미지가 있을 경우 이를 오염된 캔버스로 판정하여 cors 오류를 만들어냈다. 그리하여 변환된 결과물에서도 div는 잘 보이지만, 이미지만 안보이게 되는 이슈가 있었다.
      • 해결 : 코드는 s3를 aws의 cloudFront를 통해 가져오고 있었다. 이곳에서 가져올때 cors오류를 없애기 위해서는 응답헤더에 Access-control-header를 받아와야만 가능했다.
        • cloudFront의 동작부분에 응답헤더 cors 추가
        • customHeader에 origin * 추가
        • 그뒤로부턴 잘 불러와졌다.
   2. div안에 자식이 숨겨지는 오류
      • 앞에 이슈와 같이 div는 잘 보이지만 div안에 자식이 div여도 안보여지는 오류가있었다. 이는 부모 div에 overflow : hidden을 줘서 계속 안보였었던 것이다. hidden 요소를 제거해주니 그 뒤로부터 잘 됐다.