Html 简明教程

HTML - CORS

Cross-origin resource sharing (CORS) 是一种机制，它允许从网络浏览器中的另一个域加载受限的资源。

Cross-origin resource sharing (CORS) is a mechanism to allows to load the restricted resources from another domain in web browser

例如，假设我们单击 HTML5 演示部分中的 HTML5 视频播放器。首先，它将询问摄像头权限，如果用户允许权限，则只打开摄像头，否则不打开。

For example, suppose we click on HTML5 video player in HTML5 demo section. First, it will ask camera permission, if user allow the permission then only it will open the camera otherwise not.

Making a CORS request

Chrome、Firefox、Opera 和 Safari 等现代浏览器都使用 XMLHttprequest2 对象，而 Internet Explorer 使用类似的 XDomainRequest 对象。

The modern browsers like Chrome, Firefox, Opera and Safari all use the XMLHttprequest2 object and Internet Explorer uses the similar XDomainRequest object.

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 handles in CORS

Sr.No.	Event Handler & Description
1	onloadstart Starts the request
2	onprogress Loads the data and send the data
3	onabort Abort the request
4	onerror request has failed
5	onload request load successfully
6	ontimeout time out has happened before request could complete
7	onloadend When the request is complete either successful or failure

Example of onload or onerror event

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

Example of CORS with handler

下面的示例将显示 makeCorsRequest() 和 onload 处理程序的示例

Below example will show the example of makeCorsRequest() and onload handler

// 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();
}