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

0

s3에 업로드된 이미지 파일을 가져올 때는 cors 가 발생하지 않았는데

이상하게 영상 스트리밍을 하려고 m3u8파일을 가져올 때 cors 오류가 발생합니다.

원인은 응답해더에 Access-Control-Allow-Origin: http://localhost:3000 이 포함돼서 오기 때문인데,

여기에 이미지 설명 입력

같은 s3에 존재하는 이미지 파일들은 문제 없이 다운로드 됩니다.

여기에 이미지 설명 입력

feita há um ano832 visualizações
2 Respostas
3

안녕하세요, 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 오류가 없는 것을 확인할 수 있습니다.

Headers-CORS-m3u8


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

감사합니다.


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

profile picture
Ayeon_K
respondido há 7 meses
0

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

AWS
Hyeon
respondido há um ano

Você não está conectado. Fazer login para postar uma resposta.

Uma boa resposta responde claramente à pergunta, dá feedback construtivo e incentiva o crescimento profissional de quem perguntou.

Diretrizes para responder a perguntas