Javascript에서 S3 파일 접근 시 CORS 문제 해결 / AWS S3 CORS 설정 방법

Javascript에서 S3 파일 접근 허용

Javascript에서 S3 파일 접근 시 에러메세지

painting:1 Access to image at 'https://버킷명.s3.ap-northeast-2.amazonaws.com/폴더명/파일명.jpg' from origin 'http://호출URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Java에서 S3 파일에 접근 가능해도, Javascript에서는 위와 같이 CORS 에러가 날 수 있습니다.

S3 CORS 설정 방법

Amazon S3 > 버킷 > 버킷 선택 > 권한 탭 > 하단 CORS(Cross-origin 리소스 공유) > 편집

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "http://개발서버URL:포트",
            "http://localhost:포트"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ]
    }
]

위와 같이 작성 후 저장하면 개발서버와 로컬의 Javascript에서 해당 S3에 접근할 때 CORS 에러가 나지 않습니다.

---

브라우저 캐시로 인한 S3 CORS 문제 해결

S3 CORS 설정 후에도 일부 리소스에서 CORS 에러가 나는 경우가 있습니다.

F12 네트워크 탭에서 문제가 발생한 이미지를 분석해 보면 Status Code가 200 OK이지만,
이미지를 prefetch cache 또는 disk cache에서 가져온다 써있고, Request Headers가 없는 경우입니다.

S3 리소스에 대해 캐시 미사용 설정

S3 객체 선택 > 작업 > 메타데이터 편집 > 메타데이터 추가 >

유형	시스템 정의 선택
키	Cache-Control 선택
값	no-store 입력

S3 리소스에 대해 브라우저 캐시를 사용하지 않도록 설정하면 CORS 에러가 나지 않습니다.
S3 폴더에 설정 적용 시에는 하위 모든 파일들에 메타데이터가 일괄 추가됩니다.