웹 애플리케이션을 개발할 때, 다른 도메인에서 호스팅되는 오디오 파일을 재생해야 할 때가 있습니다. 그러나 웹 브라우저는 보안상의 이유로 인해 동일 출처 정책 (Same-Origin Policy) 에 의해 제한을 받습니다. 이 정책은 웹 페이지가 다른 도메인의 리소스에 액세스하는 것을 방지함으로써 사용자의 보안을 보장합니다.

하지만 크로스 오리진 요청 (CORS) 를 사용하면, 웹 애플리케이션에서 다른 도메인의 오디오를 재생할 수 있습니다. CORS는 웹 애플리케이션이 다른 도메인의 리소스에 접근할 수 있는 권한을 부여합니다.

다음은 자바스크립트에서 CORS를 사용하여 다른 도메인의 오디오를 재생하는 방법을 살펴보겠습니다.

1. CORS 헤더 설정

첫 번째 단계는 오디오 파일이 호스팅된 도메인의 서버에서 CORS 헤더를 설정하는 것입니다. 다음과 같이 Access-Control-Allow-Origin 헤더를 추가하여 허용할 도메인을 지정합니다.

response.setHeader('Access-Control-Allow-Origin', 'https://yourwebsite.com');

위 예제에서 'https://yourwebsite.com'은 오디오 파일을 재생할 도메인의 URL입니다. 필요한 경우 와일드카드 (*)를 사용하여 모든 도메인에 대한 액세스를 허용할 수 있습니다. 그러나 보안 상의 이유로 와일드카드는 권장되지 않습니다.

2. XMLHttpRequest로 오디오 파일 요청하기

두 번째 단계는 자바스크립트를 사용하여 오디오 파일을 다른 도메인에서 가져오는 것입니다. XMLHttpRequest 객체를 사용하여 서버에서 오디오 파일을 요청하고 응답을 처리합니다.

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://otherdomain.com/audio.mp3', true);
xhr.responseType = 'blob';

xhr.onload = function() {
    if (xhr.status === 200) {
        var blob = xhr.response;
        var audio = new Audio(URL.createObjectURL(blob));
        audio.play();
    }
};

xhr.send();

위 예제에서 xhr.open 함수의 첫 번째 매개변수에는 오디오 파일의 URL을 입력하고, xhr.responseType을 'blob'로 설정하여 응답을 Blob 객체로 받습니다. 그리고 xhr.onload 함수에서는 Blob 객체를 사용하여 오디오 요소를 만들고 재생합니다.

3. 브라우저 지원 확인

위의 방법은 CORS를 지원하는 모든 최신 웹 브라우저에서 작동합니다. 그러나 오래된 브라우저에서는 해당 기능을 지원하지 않을 수 있으므로, 페이지에 대해 CORS를 활성화하려면 서버 측에서 추가적인 구성이 필요할 수 있습니다.

마무리

이제 자바스크립트를 사용하여 CORS를 활용하여 다른 도메인의 오디오를 재생할 수 있는 방법을 알아보았습니다. CORS를 사용하면 웹 애플리케이션에서 보안상의 이유로 인해 제한되지 않고 다른 도메인의 리소스에 자유롭게 액세스할 수 있습니다.

[!IMPORTANT] CORS를 사용하여 다른 도메인의 리소스에 액세스할 때는 보안상의 이유로 인해 필요한 인증 및 권한을 확인하는 추가 로직을 구현해야 할 수도 있습니다.

자바스크립트 Cors(Cross-Origin Resource Sharing) 이란?