Html 简明教程
HTML - CORS
Cross-origin resource sharing (CORS) 是一种机制,它允许从网络浏览器中的另一个域加载受限的资源。
例如,假设我们单击 HTML5 演示部分中的 HTML5 视频播放器。首先,它将询问摄像头权限,如果用户允许权限,则只打开摄像头,否则不打开。
Making a CORS request
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');
}
Event handles in CORS
Sr.No. |
Event Handler & Description |
1 |
onloadstart Starts the request |
2 |
onprogress 加载数据并发送数据 |
3 |
onabort Abort the request |
4 |
onerror request has failed |
5 |
onload request load successfully |
6 |
ontimeout 在请求完成之前超时 |
7 |
onloadend 无论请求是否成功或失败,当请求完成时 |
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 处理程序的示例
// 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();
}