Cloudfront Access-Control-Allow-Origin 오류

 

오래전 일이다.

 

생성된 QR 이미지를 포함한 화면을 캡쳐해서

 

웹에서 다운로드 해주는 기능을 만든적이 있었다.

(앱에서 했으면 쉬웠겠지만 앱개발자가 바빠서..ㅎ)

 

cloudfront 주소를 img src로 사용했는데

 

계속 브라우저에서 Access-Control-Allow-Origin 에러를 내뱉는것이었다.

 

쿨라우드프런트 들어가서  behavior ->edit 을 누른다

 

cloudfront behaviors tab

 

 

 

그리고

 

Cache Based on Selected Request Headers 화이트 리스트에 하단 추가

 

1. Access-control-request-headers

2. Access-control-request-method

3. origin

 

Cloudfront Behavior

 

그리고 저장후 클라우드 프런트 설정 변경 완료되면 퍼지를 하면 오류 Bye Bye~

(참고로 S3와 CloudFront는 별개다. 각각 same origin 관리가 필요함)

 

 

 

S3 참고이미지

S3 bucket

 

 

 

 

 

 

관련 내용은 요기를 참조하자