[React] pdf export image S3 CORS (feat. html2canvas, react-pdf)

react에서 pdf로 파일을 내보내는 기능을 만드는데 CORS 에러가 났다.

html2canvas와 react-pdf로 시도해 보았다.

기본적으로 해주어야하는것

서버쪽에서 cors권한 추가해주면 된다고해서 S3 CORS 정책을 추가하였다.

일반적인 경우 서버쪽에서 이런 처리를 해주면 된다.

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

 

근데도 안되었다.. 멘붕;;

 

원인

S3 에서는 Header를 제대로 안주면 Origin 헤더를 추가해주지 않으면 정상적으로 access-control-allow-origin 헤더를 응답해주지 않는다고 한다.

 

근데 html2canvas나 react-pdf 이걸로 요청을하면 header를 담지 않고 요청을 보내서 정상적으로 리턴이 안되는거였다.

 

해결책은 s3나 클라이언트단에서 따로 할 수 있는건 찾을 수 없었고,

 

회사분이 클라이언트단에서 해결방안을 찾아주셨다.

 

나는 aws cloud front를 이용하여 헤더를 넣어서 하는 방법을 찾았다. (돈..ㅠ.ㅠ..)

하지만 이 경우 솔루션을 제공하신분의 시스템이 이미 cloud front를 사용하고 있었기 때문에 이렇게 해결하신것 같다.

Cloud Front를 사용하지 않는 경우 Cloud Front를 대체할 서버를 만들어서 우회? 시켜줘야할것 같다.

해결

해결방안은 크게 클라이언트에서 처리하는 방법과 중간 서버를 두는 방법 2개가 있는것 같다.

중간서버를 두는 방법은 aws의 Cloud Front를 이용해서 할지 아니면 직접 만들어서 할지 선택해서 할 수 있다.

서버로 하는걸 테스트해보려고 했지만 클라이언트가 쉽고 간단해 그것만 적는다.

클라이언트단에서 안될 경우 해결방안을 찾을 수 있게 기록만 해놓았다.

 

해결 1 클라이언트 - crossOrigin 추가

참고 : 해당 코드는 react에서 사용된 코드이다.

image 태그에 crossOrigin="anonymous" 옵션을 추가한다.

 

저걸 했는데도 안된다면 캐시되어있는 이미지를 보고 있는것일 수 있으므로 아래와 같이 캐시를 보지 않고 다시 조회하도록 하면된다.

 

이 코드를 해석하면 이미지 주소(videoThumbnail) 가 이미지 데이터 URI라면 그대로 사용하고, 아니라면  videoThumbnail URL 뒤에 현재 시간을 덧붙인 새로운 URL을 생성하는 코드이다.

이렇게 하는 이유는 캐싱된 이미지를 사용하지 않고, 새로운 URL을 로드하도록 강제하기 위해서이다.

(이미지 URL에 현재 시간을 덧붙이면 브라우저가 매번 새로운 URL을 로드하도록 강제한다.)

<img crossOrigin="anonymous" src={(/^data:image/.test(videoThumbnail as string) ? videoThumbnail : videoThumbnail + "?" + new Date().getTime()) as string} />

 

해결 2 AWS Cloud Front

https://velog.io/@kimsehwan96/S3-CORS-%ED%97%A4%EB%8D%94-%EA%B4%80%EB%A0%A8-%EC%9D%B4%EC%8A%88-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-html2canvas-lottie

S3 CORS 헤더 관련 이슈 해결방법 (html2canvas, lottie)

https://github.com/dnd-side-project/dnd-mentee-4th-9-repo/issues/182

CORS · Issue #182 · dnd-side-project/dnd-mentee-4th-9-repo

 

해결 3 중간 서버 만들기

Cloud Front를 사용하지 않는 경우 이걸 위해 Cloud Front를 사용하기 좀 그럴 수 있다.

그렇다면 본인의 서버가 있다면 Cloud Front를 대체할 중간 서버를 만들어서 통과하면 된다.

 

참조

https://ssa4141.tistory.com/121

Canvas + s3 cors 오류날 시 처리법

 

 

이건 어떻게 설정하는지 모르겠음

https://wouldyou.tistory.com/37

[Web] CORS란, CORS오류 해결