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

Описатели событий в CORS

onloadstart

Запускает запрос

в процессе

Загружает данные и отправляет данные

OnAbort

Отменить запрос

OnError

запрос не выполнен

в процессе

успешно загрузить запрос

ontimeout

истекло время ожидания

onloadend

Когда запрос завершен, либо успешный, либо неудачный

Пример события 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 с обработчиком

Ниже приведен пример makeCorsRequest () и обработчик загрузки