HTML5 CORS 이벤트 핸들러 사용법과 예제 코드 총정리

HTML5 CORS(교차 출처 리소스 공유)란?

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 웹 브라우저에서 다른 도메인에 속한 제한된 리소스에 접근할 수 있도록 허용하는 보안 메커니즘입니다. 기본적으로 브라우저는 동일 출처 정책(Same-Origin Policy)에 따라 다른 도메인의 리소스 요청을 차단하지만, CORS를 활용하면 서버가 명시적으로 허용한 경우에 한해 안전하게 데이터를 주고받을 수 있습니다.

CORS와 권한 허용의 개념

예를 들어, HTML5 데모 섹션에서 비디오 플레이어를 클릭하면 브라우저가 카메라 접근 권한을 요청하는 화면을 볼 수 있습니다. 이때 사용자가 권한을 허용해야만 웹 애플리케이션이 카메라를 열 수 있으며, 거부할 경우 카메라에는 접근할 수 없습니다. 이처럼 CORS 역시 서버와 클라이언트 간의 명시적인 허용 절차를 통해 외부 리소스 접근 여부를 결정합니다.

CORS 이벤트 핸들러 예제

다음은 XMLHttpRequest 객체를 활용한 CORS 이벤트 핸들러의 기본적인 예제입니다. 요청이 성공했을 때 호출되는 onload 핸들러와 오류가 발생했을 때 호출되는 onerror 핸들러로 구성되어 있습니다.

xhr.onload = function() {
    var responseText = xhr.responseText;
    // 응답 데이터를 처리합니다.
    console.log(responseText);
};
xhr.onerror = function() {
    console.log('오류가 발생했습니다!');
};

코드 설명

xhr.onload는 HTTP 요청이 정상적으로 완료되면 실행됩니다. 이 핸들러 내부에서는 xhr.responseText를 통해 서버에서 받은 응답 텍스트를 가져온 후, 원하는 방식으로 가공하거나 화면에 출력할 수 있습니다.

xhr.onerror는 네트워크 오류나 CORS 정책 위반 등으로 요청이 실패했을 때 실행됩니다. 실무에서는 사용자에게 오류 상황을 알려주고, 재시도 로직이나 로그 기록 등을 추가하는 것이 좋습니다.

이처럼 onload와 onerror 이벤트 핸들러를 함께 사용하면 CORS 환경에서 발생할 수 있는 성공 및 실패 시나리오를 모두 처리할 수 있어, 더욱 안정적인 비동기 통신 구현이 가능합니다.