[해결] videojs에서 HLS 스트리밍 시 CORS 오류 발생

 

 

이슈

dev.aaaa.com에서 videojs로 HLS 스트리밍 시 CORS 오류 발생. (동일 위치에 있는 mp4 파일은 정상 동작)

 

환경

- 스트리밍 도메인 : dev.aaaa.com

- .m3u8, .ts 파일 위치 : dev.bbbb.com/video/...

 

 

원인/해결

Video.js와 같은 Javascript로 제작된 동영상 플레이어에서 HLS 형식 동영상을 재생할 경우 HTML 관련 파일(.html, .js)과 HLS 파일(.m3u8 및 .ts)의 전달 도메인이 다르다.
→ 이 경우 CORS 설정이 필요하다.

 

만약 video.js를 호출하는 html 파일의 도메인과 S3의 도메인이 동일하면 문제 발생 X

ex) dev.aaaa.com에서 스트리밍이 이루어지고, S3도 dev.aaaa.com/video/... 였다면 문제 X

 

 

 

S3에 CORS설정이 되어있지 않은 경우 html 파일이 전달되고, HLS 파일을 호출하는 도메인이 다를 경우 에러가 발생하여 Video.js에서 정상적인 실행이 불가하다.
정상적으로 재생하기 위해서는 HLS 형식의 파일을 호스팅하는 S3에서 CORS 설정을 수행해야 한다.

 

 

 

 

정리

1) Video.js에서 로드할 HLS 파일을 호스팅하는 환경에서 CORS를 설정해야 함
    ex) S3에서 호스팅하는 경우 S3의 CORS 설정이 필요

2) S3의 CORS 설정을 사용하는 경우 특정 도메인에서 (Video.js를 통해) 재생 요청만 허용하도록 설정할 수 있다.
    https와 http는 구분됨(https만 설정할 경우 http는 CORS 에러 발생)

 

3) CloudFront + S3를 구성한다면 CF쪽에서 Origin헤더(Default Cache Header Behavior)를 S3로 전송해야 한다.