문제 개요
웹 페이지에 외부 도메인의 동영상 파일을 삽입할 때, Chrome 브라우저에서 <video> 요소가 정상적으로 로드되지 않는 경우가 있습니다. 이는 대부분 CORS(교차 출처 리소스 공유) 정책과 관련된 문제로, 브라우저의 보안 정책이 다른 출처의 미디어 리소스 접근을 차단하기 때문에 발생합니다.
해결 방법 1: crossorigin 속성을 "anonymous"로 설정
<video> 요소의 로딩 문제를 해결하는 가장 간단한 방법은 crossorigin 속성을 "anonymous" 값으로 지정하는 것입니다.
<video crossorigin="anonymous"></video>
crossorigin 속성은 해당 미디어 리소스를 교차 출처 방식으로 가져올 때 자격 증명(쿠키, 인증 정보 등) 없이 익명 모드로 요청하도록 브라우저에 알려줍니다. 이렇게 하면 서버 측에서 적절한 CORS 헤더만 반환해 주면 동영상이 정상적으로 로드됩니다.
해결 방법 2: Access-Control-Allow-Headers 응답 헤더 확인
위 방법으로도 문제가 해결되지 않는다면, 서버의 응답 헤더 설정을 점검해야 합니다. 교차 출처 요청 시 브라우저는 사전 요청(preflight request)을 보내며, 이때 서버는 클라이언트가 요청한 헤더 목록을 허용해야 합니다.
구체적으로 말하면, 요청 헤더의 Access-Control-Request-Headers에 포함된 HTTP 헤더 목록이 응답 헤더의 Access-Control-Allow-Headers 목록과 일치하지 않으면 요청이 거부되고 동영상 로딩이 실패합니다.
서버 설정 예시는 다음과 같습니다:
Access-Control-Allow-Origin: * Access-Control-Allow-Headers: Range, Content-Type Access-Control-Expose-Headers: Content-Length, Content-Range
추가 팁: Range 헤더와 스트리밍
동영상 스트리밍 시 Chrome은 일반적으로 Range 헤더를 사용하여 부분 요청(partial request)을 보냅니다. 따라서 서버가 Range 요청을 올바르게 처리하고(206 Partial Content 응답), 위 설정처럼 Range 헤더를 허용 목록에 포함시키는 것이 중요합니다.
정리
교차 출처 동영상 로딩 문제는 크게 두 가지로 해결할 수 있습니다. 첫째, <video> 태그에 crossorigin="anonymous" 속성을 추가하고, 둘째, 서버에서 Access-Control-Allow-Headers 등 필요한 CORS 응답 헤더를 올바르게 구성하는 것입니다. 두 가지를 함께 적용하면 대부분의 Chrome 로딩 오류를 해결할 수 있습니다.