HTML5 – CORS

跨源资源共享（CORS） 是一种机制，允许来自另一个域的受限资源在Web浏览器中访问。

例如，如果您在HTML5演示部分中单击 HTML5-视频播放器 ，它将要求您的相机权限。如果用户允许权限，则只有它才可以打开相机，否则它将无法打开相机以供Web应用程序使用。

发送CORS请求

在这里，Chrome，Firefox，Opera和Safari使用XMLHttprequest2对象，而Internet Explorer使用类似的XDomainRequest对象。

function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();

   if ("withCredentials" in xhr) {

      // 检查XMLHttpRequest对象是否具有“withCredentials”属性。
      // “withCredentials”仅存在于XMLHTTPRequest2对象上。
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {

      // 否则，检查XDomainRequest。
      // XDomainRequest仅存在于IE中，是IE实现CORS请求的方式。
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {

      // 否则，浏览器不支持CORS。
      xhr = null;
   }
   return xhr;
}

var xhr = createCORSRequest('GET', url);

if (!xhr) {
   throw new Error('CORS不支持');
}

CORS中的事件处理

序号	事件处理程序和描述
1	onloadstart 启动请求
2	onprogress 加载和发送数据
3	onabort 中止请求
4	onerror 请求失败
5	onload 请求成功加载
6	ontimeout 请求完成之前发生超时
7	onloadend 请求完成（无论成功或失败）

onload或onerror事件的示例

xhr.onload = function() {
   var responseText = xhr.responseText;

   // 处理响应。
   console.log(responseText);
};

xhr.onerror = function() {
   console.log('发生错误！');
};

CORS带处理程序的示例

以下示例将显示makeCorsRequest（）和onload处理程序的示例。

// 创建XHR对象。
function createCORSRequest(method, url) {
   var xhr = new XMLHttpRequest();

   if ("withCredentials" in xhr) {

      // Chrome / Firefox / Opera / Safari的XHR。
      xhr.open(method, url, true);
   } else if (typeof XDomainRequest != "undefined") {

      // IE的XDomainRequest。
      xhr = new XDomainRequest();
      xhr.open(method, url);
   } else {

      // 不支持CORS。
      xhr = null;
   }
   return xhr;
}

// 解析响应中的标题标记的助手方法。
function getTitle(text) {
   return text.match('<title>(.*)?</title>')[1];
}

// 进行实际的CORS请求。
function makeCorsRequest() {

   // 所有HTML5 Rocks属性都支持CORS。
   var url = 'http://www.tutorialspoint.com';

   var xhr = createCORSRequest('GET', url);

   if (!xhr) {
      alert('CORS不支持');
      return;
   }

   // 响应处理程序。
   xhr.onload = function() {
      var text = xhr.responseText;
      var title = getTitle(text);
      alert('从CORS请求到' + url + '的响应：' + title);
   };

   xhr.onerror = function() {
      alert('糟糕，请求时出错了。');
   };
   xhr.send();
}