본문 바로가기

Web/React

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

반응형

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

html2canvasreact-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)

AWS S3는 Simple Storage Service를 줄여 S3라고 부른다.이 S3는 여러 용도로 쓰이는데 대표적으로 아래 세가지 용도로 주로 사용된다.정적 리소스 저장용 (웹 하드 느낌?)정적 웹 페이지 및 콘텐츠 호스팅

velog.io

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

 

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

 

github.com

 

해결 3 중간 서버 만들기

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

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

 

참조

https://ssa4141.tistory.com/121

 

Canvas + s3 cors 오류날 시 처리법

canvas에서 s3 이미지 끌어다 쓸 때 cors 오류가 나는데 다음과 같이 처리하면 해결 1. crossOrigin을 anonymous로 설정 2. 이미지 경로 뒤에 캐시방지를 위한 파라미터 추가 if(this.selectedDrawing){ let image = new

ssa4141.tistory.com

 

 

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

https://wouldyou.tistory.com/37

 

[Web] CORS란, CORS오류 해결

웹 생태계에는 다른 출처(origin)로의 리소스 요청을 제한하는 것과 관련된 두 가지 정책이 존재한다. 바로 CORS와 SOP다. Origin, 출처 이러한 url이 있을 때 origin은 protocol + host + port를 말한다. 예시 : h

wouldyou.tistory.com

 

반응형