HTML5 - CORS

Cross-origin resource sharing (CORS) là một cơ chế cho phép các tài nguyên bị hạn chế từ một miền khác trong trình duyệt web.

Giả sử, nếu bạn nhấp vào trình phát video HTML5 trong các phần demo html5. nó sẽ yêu cầu sự cho phép của máy ảnh. nếu người dùng cho phép thì chỉ nó mới mở camera hoặc nếu không nó sẽ không mở camera cho các ứng dụng web.

Đưa ra yêu cầu CORS

Ở đây Chrome, Firefox, Opera và Safari đều sử dụng đối tượng XMLHttprequest2 và Internet Explorer sử dụng đối tượng XDomainRequest tương tự.

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');
}

Xử lý sự kiện trong CORS

Sr.No.	Xử lý sự kiện & mô tả
1	onloadstart Bắt đầu yêu cầu
2	onprogress Tải dữ liệu và gửi dữ liệu
3	onabort Hủy bỏ yêu cầu
4	onerror yêu cầu đã thất bại
5	onload yêu cầu tải thành công
6	ontimeout đã hết thời gian trước khi yêu cầu có thể hoàn thành
7	onloadend Khi yêu cầu hoàn thành hoặc thành công hoặc thất bại

Ví dụ về sự kiện onload hoặc onerror

xhr.onload = function() {
   var responseText = xhr.responseText;
   
   // process the response.
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('There was an error!');
};

Ví dụ về CORS với trình xử lý

Ví dụ dưới đây sẽ hiển thị ví dụ về makeCorsRequest () và trình xử lý 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();
}