-
서론
플러터 3.29.X 업데이트 이후 Web 빌드 시 더 이상 --web-renderer html 옵션 사용 못 함
울며 겨자먹기로 CanvasKit 으로 빌드 및 S3 정적 파일 업로드함
근데 S3 이미지가 안 나온다...? -
무슨 문제?
SSL 적용되고, S3 에 업로드된 CanvasKit 렌더링된 플러터 웹앱에서 S3 에 업로드되어있는 이미지를 렌더링하려고 할 때 CORS 이슈 발생 -
시도해본 것
- S3 CORS 전체 허용 (CORS 모두 허용하면 당연히 잘 되지 않을까?)
=> But 해결 안 됨 - SSL 이 적용된 호스트의 서브 도메인으로 CloudFront 와 S3 연결 (동일 도메인이고 서브 도메인만 다르므로 CORS 를 해결할 수 있지 않을까?)
=> But 해결 안 됨
- S3 CORS 전체 허용 (CORS 모두 허용하면 당연히 잘 되지 않을까?)
-
왜 안 됨?
- 이미지 응답을 전달받을 때, 응답 헤더에 Access-Control-Allow-Origin 이 존재하지 않는 이미지는 캔버스 내부에서 이미지를 렌더링 할 수 없다고 함.
- 근데 크롬을 제외한 타 브라우저에서는 정상동작함. 크롬 브라우저의 정책 때문인지...?
- 그럼 어떻게 해결?
- CloudFront => 동작 편집 => 원본 요청 정책에 CORS-S3Origin 지정 후 저장 => Invalidate
- 동작함
- 그래서 적용된 것들은?
- S3 의 CORS 는 모든 Origin 에서 불러올 수 있도록 정책 편집했었음
- S3 <-> CloudFront 연결함 (덤으로 도메인까지 적용함 근데 이건 안 해도 상관없음)
- CloudFront 에 원본 요청 정책 추가
나를 성장시키는 좌절에 감사하고 즐기려고 노력 중