최근 회사에서 pdf 다운로드 기능을 html2canvas 라이브러리를 이용해 개발하는데, s3에 있는 이미지에 접근할때면 계속 cors 에러가 떴다.

찾아보니 비슷한 이슈를 다루신 분들이 여러개 있었는데, 열심히 따라해도 이상하게 나만 안되는게 왜일까 싶어서 시행착오를 겪다가 해결해서 글을 남긴다.

참고한 글 1
참고한 글 2
참고한 글 3

CORS란?

개발하면서 수없이 마주치는 CORS. 이름 그대로 다른 출처의 자원의 공유에 대한 정책이다.
CORS는 웹 브라우저에서 보안상의 이유로 도입되었는데. 현재 사용자가 접속한 웹 애플리케이션이 다른 출처의 리소스를 불러올 때, Access-Control-Allow-Origin 헤더를 보내주지 않으면 브라우저가 그 리소스를 거부하는 보안 정책이다.

즉, 해결책은 Access-Control-Allow-Origin 헤더에 적절한 값을 담아서 보내주면 된다.

해결한 방법

위에 분들이 잘 적어주셔서 그대로 따라해서 해결될 수도 있지만, 내 경우엔 조금 더 해야할 일이 있었다.

1. 우선 해야할 건 s3 버킷 설정이다. CORS 정책을 열어줘야 한다.

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

이렇게 하면 웹상에서 s3 이미지를 받아서 쓰는데에는 문제가 없지만, html2canvas나 lottie(사용은 안해봤음) 에서 불러올 때는 문제가 있다. 받아온 이미지를 canvas로 재구성할 때, cors 정책을 위반한다고 브라우저가 판단해 cors 에러를 발생시킨다.
이런 경우는 서버측에서 access-control-allow-origin을 내려줘야 하는데, 클라이언트에서 이미지 리소스를 받을 때 Origin 헤더를 담아서 보내지 않기에 생기는 문제가 발생하기 때문에 cloudfront를 통하여 Origin 헤더를 삽입해야 한다.

2. cloudfront에서 동작 탭을 들어가, 캐시 정책 => 캐시 정책 생성 => 캐시 키 설정을 누른다.

3. 캐시 키 설정에서 헤더에 Origin을 추가해준다.

   

4. 원본 요청 정책을 CORS-S3Origin으로 설정해준다.
   

여기까지 했으면 aws에서 할일은 끝났다.

html2canvas

5. html2canvas 옵션에 useCORS를 설정한다.
   

6. 사용하는 이미지 태그에 crossOrigin="anonymous"를 주고, src에 쿼리스트링을 줘서 캐싱 처리를 막는다. 내 경우에는 캐싱으로 인해 응답 헤더에 access-control-allow-origin가 포함이 안되는 문제가 있었다.
   

여기까지 하면 끝! 나처럼 해결이 됐으면 좋겠다(난 이것저것 삽질을 많이 했었다..)