HTML5를 사용하여 웹 브라우저에서 다른 도메인의 제한된 리소스를 허용하는 방법

CORS(교차 출처 리소스 공유)는 웹 브라우저에서 다른 도메인의 제한된 리소스를 허용하는 메커니즘입니다.

html5 데모 섹션에서 HTML5-비디오 플레이어를 클릭한다고 가정해 보겠습니다. 카메라 권한을 요청할 것입니다. 사용자가 권한을 허용하면 카메라만 열리며 그렇지 않으면 웹 응용 프로그램용 카메라가 열리지 않습니다.

여기에서 Chrome, Firefox, Opera 및 Safari는 모두 XMLHttprequest2 개체를 사용하고 Internet Explorer는 유사한 XDomainRequest 개체인 개체를 사용합니다.

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   if ("withCredentials" in xhr) {
      // Check if the XMLHttpRequest object has a "withCredentials" property.
      // "withCredentials" only exists on XMLHTTPRequest2 objects.
      xhr.open(method, url, true);
   }
   else if (typeof XDomainRequest != "undefined") {
      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   }
   else {
     // Otherwise, CORS is not supported by the browser.
      xhr = null;
   }
   return xhr;
}
var xhr = createCORSRequest('GET', url);
if (!xhr) {
   throw new Error('CORS not supported');
}