آموزش HTML - اشتراک‌گذاری منابع بین مبدأهای مختلف (CORS)

اشتراک‌گذاری منابع بین مبدأهای مختلف (CORS) سازوکاری است که اجازه می‌دهد منابع محدودشده از یک دامنه دیگر در مرورگر وب بارگیری شوند.

به عنوان مثال، فرض کنید روی پخش‌کننده ویدیوی HTML5 در بخش دمو HTML5 کلیک می‌کنیم. ابتدا دسترسی به دوربین را درخواست می‌کند؛ اگر کاربر این دسترسی را اجازه دهد، دوربین باز می‌شود و در غیر این صورت باز نخواهد شد.

ارسال یک درخواست CORS

مرورگرهای مدرن مانند 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');
}

موشکاف‌های رویداد (Event Handlers) در CORS

مثالی از رویداد onload یا onerror

xhr.onload = function() {
   var responseText = xhr.responseText;
   // process the response.
   console.log(responseText);
};
xhr.onerror = function() {
   console.log('There was an error!');
};

مثالی از CORS همراه با موشکاف رویداد (Handler)

مثال زیر نحوه استفاده از ()makeCorsRequest و موشکاف onload را نشان می‌دهد

// Create the XHR object.
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();
   if ("withCredentials" in xhr) {
      
      // XHR for Chrome/Firefox/Opera/Safari.
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {
      
      // XDomainRequest for IE.
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {
      
      // CORS not supported.
      xhr = null;
   }
   return xhr;
}
// Helper method to parse the title tag from the response.
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// Make the actual CORS request.
function makeCorsRequest() {
   // All HTML5 Rocks properties support CORS.
   var url = 'http://www.tutorialspoint.com';
   var xhr = createCORSRequest('GET', url);
   if (!xhr) {
      alert('CORS not supported');
      return;
   }
   
   // Response handlers.
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('Response from CORS request to ' + url + ': ' + title);
   };
   xhr.onerror = function() {
      alert('Woops, there was an error making the request.');
   };
   xhr.send();
}