크로스 오리진 리소스 공유(Cross-Origin Resource Sharing, CORS)는 웹 애플리케이션에서 다른 도메인으로부터 리소스를 요청하는 것을 제한하는 보안 정책입니다. 기본적으로 브라우저는 동일 출처 정책(same-origin policy)를 따르기 때문에, 다른 도메인의 동영상 파일을 자바스크립트로 직접 재생하기 위해서는 CORS 설정을 해주어야 합니다.

1. 서버 측 CORS 설정

먼저, 동영상 파일이 위치한 서버의 CORS 설정을 확인하고 수정해야 합니다. 대부분의 서버는 CORS를 기본적으로 지원하므로 서버 측 설정이 필요하지 않을 수도 있습니다. 그러나 만약 서버가 CORS를 지원하지 않는다면, 서버 측 코드를 수정하여 CORS를 활성화해야 합니다.

예를 들어, Node.js와 Express를 사용하는 경우, 다음과 같이 CORS 미들웨어를 설치하고 사용할 수 있습니다.

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors());

// 라우터 정의 및 서버 설정

app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위의 코드에서 cors() 함수를 사용하여 모든 도메인에서의 요청을 허용합니다. 보안 상의 이유로 모든 도메인을 허용하지 않는 것이 좋을 수 있으므로, 필요에 따라 특정 도메인만 허용하도록 설정할 수도 있습니다. 이는 CORS 미들웨어의 origin 옵션을 사용하여 지정할 수 있습니다.

2. 클라이언트 측 JavaScript 코드

서버 측 CORS 설정이 완료되었다면, 이제 클라이언트 측 JavaScript 코드에서 동영상을 재생할 수 있습니다. HTML <video> 요소를 사용하여 동영상을 표시하고, 자바스크립트를 사용하여 원하는 동영상을 로드하고 재생할 수 있습니다.

const video = document.getElementById('video');

fetch('https://example.com/video.mp4')
  .then(response => response.blob())
  .then(blob => {
    const videoURL = URL.createObjectURL(blob);
    video.src = videoURL;
  })
  .catch(error => {
    console.error('동영상을 가져오는 중 에러가 발생했습니다:', error);
  });

위의 코드에서 fetch() 함수를 사용하여 원하는 동영상 파일을 가져옵니다. 가져온 동영상 데이터는 blob() 메서드를 사용하여 Blob 객체로 변환한 후, URL.createObjectURL() 함수를 사용하여 임시 URL로 변환합니다. 마지막으로, 이 URL을 <video> 요소의 src 속성에 할당하여 동영상을 로드하고 재생합니다.

결론

CORS를 사용하여 자바스크립트에서 다른 도메인의 동영상을 재생하는 방법을 알아보았습니다. 서버 측에서 CORS를 활성화하고, 클라이언트 측에서 동영상을 가져와서 재생할 수 있습니다. 하지만 보안상의 이유로 모든 도메인을 허용하지 않는 것이 좋으므로, 필요한 경우 특정 도메인만 허용하도록 설정하는 것이 좋습니다.

#프론트엔드 #CORS