AWS CORS 대응기 (feat. html2canvas)

오늘은 PDF 다운로드를 구현하면서 겪었던 AWS S3, CloudFront, html2canvas와 관련된 CORS 이슈를 해결했던 경험을 작성해보고자 한다.

발생 과정

html2canvas를 이용해서 PDF 다운로드를 구현했는데, 저번에 올렸던 글에서 S3에서 회원마다 다른 로고를 받아와서 보여주는 부분에서 문제가 발생했다. 화면에서는 문제없이 출력되는데, html2canvas를 거치니까 CORS 에러가 뜨면서 출력물에는 로고 다운로드 실패로 인해 보이지가 않는 상황이 생겼다.

해결 과정

"html2canvas2 cors" 키워드로 구글링을 하면 검색 결과가 많이 나온다. 해결에 가장 도움이 됐던 글에서 제시해준 방법을 사용하면 문제 해결이다.

1. 먼저, S3 버킷 설정을 한다. 권한 탭에서 가장 아래에 있는 CORS (Cross-origin 리소스 공유) 편집을 들어가 아래 JSON 형식의 CORS 정책을 붙여넣는다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "x-amz-server-side-encryption",
            "x-amz-request-id",
            "x-amz-id-2"
        ],
        "MaxAgeSeconds": 3000
    }
]

2. CloudFront에서 동작 탭에 들어가 원본 요청 정책에 CORS-S3Origin을 추가한다.
   

3. custom header에 origin * 을 추가한다.
   

4. 마지막으로 html2cnavas에 allowtaint, useCORS를 설정하면 된다.

  allowTaint: true,
  useCORS: true,

그럼 문제 해결!