s3에 업로드된 m3u8 파일을 가져올때 cors 오류가 발생합니다

안녕하세요, wizpoint 님.

S3 에 업로드된 파일에서 .m3u8 파일에 대한 요청 시 CORS 오류에 대한 문제가 발생한 것 같습니다.

m3u8 파일이 올려져 있는 S3 버킷의 Permission 에서 다음과 같이 CORS 정책을 설정할 수 있습니다.

[1]

아래와 같은 GET 요청를 실행하고 응답을 확인하여 CORS 정책을 설정 되었는지 확인해 볼 수 있습니다.

curl -H "Origin: example.com" -v "https://2023-10-16-s3-m3u8.s3.ap-northeast-2.amazonaws.com/sample-file-small.m3u8"

• Origin 는 질문자님의 클라이언트 애플리케이션 domain 과 같은 필수 오리진 헤더로 바꿉니다.
• https://2023-10-16-s3-m3u8.s3.ap-northeast-2.amazonaws.com/sample-file-small.m3u8 는 질문자님께서 CORS 오류를 겪었던 리소스의 URL 로 바꾸어서 진행합니다.

리소스가 저장된 S3 버킷의 CORS 에 대해 올바르게 설정되지 않은 경우 아래 예시와 같은 CORS 헤더가 반환되지 않은 응답을 받게 됩니다.

HTTP/1.1 200 OK
x-amz-id-2: ACgDtvzV2rHKEucYg2Hab7O+g+H36kz5kwrdmdO3fnAUPTi8SsLEvBHq5i7aNSVfFc+6yoj846Q=
x-amz-request-id: 8XDKQZHAAGBBWBWT
Date: Tue, 17 Oct 2023 00:38:58 GMT
Last-Modified: Mon, 16 Oct 2023 17:03:19 GMT
ETag: "314568718943250951decf9bbdbcdc74"
x-amz-server-side-encryption: AES256
Accept-Ranges: bytes
Content-Type: application/x-mpegURL
Server: AmazonS3
Content-Length: 210 

[2]

이를 수정하기 위해서 S3 버킷의 Permission > Cross-origin resource sharing (CORS) 에서 다음과 같은 설정을 적용할 수 있습니다.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders" : []
    }
]

• 이 규칙은 모든 오리진에서 cross-origin GET, HEAD 요청을 허용합니다. AllowedHeader 요소는 Access-Control-Request-Headers 헤더를 통해 preflight 요청에 허용되는 헤더를 지정합니다.

[3]

이후 1) 에서 수행한 동일한 요청을 보내면 다음과 같이 응답에서 CORS 헤더가 반환된 것을 확인할 수 있습니다.

HTTP/1.1 200 OK
x-amz-id-2: KfJeGYsSZ4bGyJCy2H14AOITimheKtcCQCRAV99aGxBvxuzeKej0OmHqyETVxzKgKvhbkgLTFMo=
x-amz-request-id: CZ3XFB469K0RPK48
Date: Tue, 17 Oct 2023 00:40:30 GMT
Access-Control-Allow-Origin: *                               
Access-Control-Allow-Methods: GET, HEAD          
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method   
Last-Modified: Mon, 16 Oct 2023 17:03:19 GMT
ETag: "314568718943250951decf9bbdbcdc74"
x-amz-server-side-encryption: AES256
Accept-Ranges: bytes
Content-Type: application/x-mpegURL
Server: AmazonS3
Content-Length: 210

[4]

마지막으로, 1) 과 동일한 요청을 보내는 웹 애플리케이션을 실행하면, 브라우저에서도 CORS 오류가 없는 것을 확인할 수 있습니다.

답변이 도움이 되었기를 바랍니다.

감사합니다.

Reference

[+] CORS 구성 https://docs.aws.amazon.com/ko_kr/AmazonS3/latest/userguide/ManageCorsUsing.html

[+] CloudFront의 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 오류를 해결하려면 어떻게 해야 합니까? https://repost.aws/ko/knowledge-center/no-access-control-allow-origin-error

안녕하세요. m3u8 파일이 들어있는 s3 bucket 으로 가셔서 권한(permission) 탭 선택 -> 아래쪽에 보면 버킷 CORS 설정하는 부분이 있습니다. 여기에 설정이 있는지 확인해보시고 있다면 삭제하고 다시 한번 테스트 해보시겠어요?