Cross-Origin Resource Sharing (CORS) - это рабочий проект W3C, который определяет, как браузер и сервер должны взаимодействовать при доступе к источникам из разных источников. Основная идея CORS состоит в том, чтобы использовать настраиваемые заголовки HTTP, чтобы браузер и сервер знали достаточно друг о друге, чтобы определить, будет ли запрос или ответ успешным или нет.
Для простого запроса, который использует либо GET, либо POST без пользовательских заголовков и чье тело text / plain, запрос отправляется с дополнительным заголовком, который называется Origin. Заголовок Origin содержит источник (протокол, имя домена и порт) запрашивающей страницы, так что сервер может легко определить, должен ли он обслуживать ответ. Пример заголовка Origin может выглядеть так:
Origin: http://www.webiste.com
Если сервер решает, что запрос должен быть разрешен, он отправляет заголовок Access-Control-Allow-Origin, возвращающий тот же источник, который был отправлен, или «*», если это общедоступный ресурс. Например:
Access-Control-Allow-Origin: http://www.webiste.com
Если этот заголовок отсутствует или происхождение не совпадает, браузер отклоняет запрос. Если все хорошо, то браузер обрабатывает запрос. Обратите внимание, что ни запросы, ни ответы не содержат информацию о файлах cookie.
Все ранее упомянутые браузеры поддерживают эти простые запросы. Firefox 3.5+, Safari 4+ и Chrome поддерживают использование через объект XMLHttpRequest. При попытке открыть ресурс из другого источника это поведение автоматически запускается без какого-либо дополнительного кода. Например:
var xhr = new XMLHttpRequest();
xhr.open("get", "http://www.webiste.com/some_resource/", true);
xhr.onload = function(){ //instead of onreadystatechange
//do something
};
xhr.send(null);
Чтобы сделать то же самое в Internet Explorer 8, вам нужно будет использовать объект XDomainRequest таким же образом:
var xdr = new XDomainRequest();
xdr.open("get", "http://www.webiste.com/some_resource/");
xdr.onload = function(){
//do something
};
xdr.send();
Команда Mozilla в своем посте о CORS предлагает проверить наличие свойства withCredentials, чтобы определить, поддерживает ли браузер CORS через XHR. Затем вы можете связать с существованием объекта XDomainRequest, чтобы охватить все браузеры:
function createCORSRequest(method, url){
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
xhr.open(method, url, true);
} else if (typeof XDomainRequest != "undefined"){
xhr = new XDomainRequest();
xhr.open(method, url);
} else {
xhr = null;
}
return xhr;
}
var request = createCORSRequest("get", "http:/www.webiste.com/");
if (request){
request.onload = function(){
//do something with request.responseText
};
request.send();
}
Объект XMLHttpRequest в Firefox, Safari и Chrome имеет достаточно сходные интерфейсы с объектом IE XDomainRequest, поэтому этот шаблон работает довольно хорошо. Общие свойства / методы интерфейса:
- abort () - используется для остановки уже выполняющегося запроса.
- onerror - использовать вместо onreadystatechange для обнаружения ошибок.
- onload - использовать вместо onreadystatechange для обнаружения успехов.
- responseText - использовать для получения содержимого ответа.
- send () - использовать для отправки запроса.