개요

웹 개발에서 동일 출처 정책(Cross-Origin Resource Sharing, CORS)는 보안 상의 이유로 다른 도메인 간의 리소스 요청을 제한하는 정책입니다. 일반적으로, 웹 페이지에서 JavaScript를 사용하여 다른 도메인의 음악 스트리밍을 요청하면 CORS 오류가 발생합니다. 이 문제를 해결하기 위해 CORS를 활용하여 자바스크립트에서 다른 도메인의 음악 스트리밍을 구현하는 방법을 알아보겠습니다.

CORS 설정

다른 도메인에서 음악 스트리밍을 요청하기 전에 서버 측에서 CORS 설정을 해주어야 합니다. 이를 위해 서버 측에서 응답 헤더에 Access-Control-Allow-Origin을 설정해야 합니다.

response.setHeader('Access-Control-Allow-Origin', '*');

위의 코드는 모든 도메인에서의 요청을 허용하는 예시입니다. 보안 상의 이유로 가능한한 구체적인 도메인을 명시하는 것이 좋습니다.

JavaScript에서 음악 스트리밍 요청

CORS 설정이 완료되었다면, 자바스크립트에서 다른 도메인의 음악 스트리밍을 요청할 수 있습니다. XMLHttpRequest나 fetch API를 사용하여 서버에 요청할 수 있습니다. 아래는 fetch API를 사용한 예시입니다.

fetch('https://www.example.com/music/streaming', {
  method: 'GET',
  mode: 'cors' // CORS 요청을 보내기 위해 'cors' 모드를 설정
})
.then(response => response.blob())
.then(blob => {
  // 서버로부터 받은 음악 파일(blob)을 처리합니다.
  // 예시: HTML audio 요소를 생성하여 음악을 재생합니다.
  const audio = new Audio(URL.createObjectURL(blob));
  audio.play();
})
.catch(error => {
  // 오류 처리
  console.error(error);
});

위의 코드에서 fetch 함수를 이용하여 서버에 GET 요청을 보내고 있습니다. 모드를 ‘cors’로 설정하여 CORS 요청을 보내도록 합니다. 응답은 Blob 형태로 받아서 원하는 방식으로 처리할 수 있습니다. 이 예시에서는 HTML audio 요소를 생성하여 음악을 재생하도록 설정하였습니다.

이제 자바스크립트에서 다른 도메인의 음악 스트리밍을 구현하는 방법을 알아봤습니다. CORS 설정을 통해 다른 도메인 간의 리소스 요청을 허용하고, JavaScript에서 fetch API를 사용하여 음악 스트리밍을 요청할 수 있게 되었습니다.

마무리

CORS를 활용하여 자바스크립트에서 다른 도메인의 음악 스트리밍을 구현하는 방법에 대해 알아보았습니다. 서버 측에서 CORS 설정을 해주고, JavaScript에서 fetch API를 사용하여 음악 스트리밍을 요청할 수 있습니다. CORS를 적절히 활용하여 웹 개발에서 다양한 도메인과의 통신을 구현할 수 있습니다.

#CORS #음악스트리밍