CORS

[kimsehwan96]

No description provided.

[1000peach]

덧붙이자면 지금 아형님이 주신 링크로 json 로티 파일에 이런 식으로 접근하고 있는데,
(링크에 있는 파일명은 다른 무작위 문자열로 대체 했습니다)

<lottie-player src="https://assets8.lottiefiles.com/packages/vkdlfaudtnarlrl.json" background="transparent" speed="1" loop autoplay></lottie-player>`

resources에 json 을 똑같이 업로드 하고 그 링크를 사용할 수 있을 거 같아서 기존에 올라와있는 Test.json을 시험삼아 아래처럼 사용해봤습니다.

<lottie-player src="https://resources.seeat-plant.com/Test.json" background="transparent" speed="1" loop autoplay></lottie-player>

근데 로티 파일이 출력되지 않아서 보니까 cors 에러가 떠서 이게 안 뜨는 원인인 지 궁금해서 회의 때 말씀 드린거였습니다.!
막연하게 설명한 거 같아서 댓글 작성합니다 🙇‍♀️

이미지

에러 내용

Access to XMLHttpRequest at 'https://resources.seeat-plant.com/Test.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[kimsehwan96]

@1000peach 자세한 리포팅 감사합니다 ! 🙇‍♂️

현재 이슈는 https://resources.seeat-plant.com 에서 요청해서 특정 정적 리소스를 받아 올 때,

리소스 response 헤더에 access-control-allow-origin이 없어서 그런 것 같습니다.

그래서 서버측에서 해당 헤더를 access-control-allow-origin : "*" 을 내려주어서 html2canvas나 react-lottie 에서 해당 이미지를 사용할 때 웹 브라우저가 CORS에러를 내뱉지 않도록 강제로 조치해야 할 것 같아요 !

해당 작업 회의 끝난 이후부터 진행중이에요! 정리되면 다시 말씀드릴게요! 감사합니다.

[kimsehwan96]

정리 내용

• 우선 html2canvas나 혹은 lottie를 사용하는 경우에서, S3 에 저장된 리소스를 쓸 경우, 받아올 때 access-control-allow-origin 헤더내용을 받아와야 canvas로 재구성하거나 lottie 이미지를 사용 가능합니다.

ref: https://stackoverflow.com/questions/42263223/how-do-i-handle-cors-with-html2canvas-and-aws-s3-images
ref: airbnb/lottie-web#2148

현재 저희 정적 리소스 서버 구조는 다음과 같이 되어있는데요.

resources.seeat-plant.com (도메인) => cloudfront(캐싱 서버) => S3 (실제 기타 정적 리소스 서버)

이러한 CORS 이슈는 서버에서 access-control-allow-origin을 내려보내주면 대부분 해결 됩니다.

따라서 그렇게 진행하려고 하였으나, AWS의 제약사항이 몇가지 있어서 해결하는데 시간이 걸렸습니다.

1. S3 정적 리소스 서버에서 access-control-allow-origin 헤더를 내려주기 위해서는, 요청자의 http request 헤더에 Origin 헤더가 있어야 보내 줄 수 있다.
2. cloudfront 서버에서는 특정 헤더를 필터링해서 원본 서버(S3)에 보내 줄 수 있다.

따라서 다음과 같이 진행했습니다.

1. 요청자의 Origin 헤더는 캐싱서버에서 필터링하지 않고 S3에 전달
2. S3는 모든 Origin에 대해서 CORS 정책 허용, GET , HEAD 메서드 허용.

다만, 브라우저에서 정적 리소소스를 요청 할 때 Origin 헤더를 담아서 요청하지 않아서
제가 임의로 cloufront에서 origin 헤더를 가상으로 생성하여 S3 서버에 전달, 따라서 위와 같이 cors 허용을 위한 헤더가 내려오게 됩니다.

감사합니다!