新手学跨域之CORS

vczhan

前后端跨域交互终于迎来了官方的支持,只需在后端设置允许前端请求域,即可轻松实现跨域。
CORS适用与IE8+现代浏览器。现代浏览器通过XMLHttpRequest,IE通过XDomainRequest实现。
事件句柄(标*的事件XDomainRequest不支持)

onloadstart* 请求触发
onprogress 读取及发送数据时触发
onabort* 请求终止时触发
onerror 请求失败时触发
onload 请求成功时触发
ontimeout 超时触发
onloadend* 请求结束时触发

后端设置Access-Control-Allow-Origin,标识允许请求的来源域比如http://foo.com*表示允许来自任意域的请求。

XMLHttpRequest

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    console.log(xhr.responseText);
}
xhr.onerror = function() {
    console.log('Request Error!');
}
xhr.open('get', 'http://bar.com/xx.php');
xhr.send(null);

XDomainRequest

var xdr = new XDomainRequest();    
xdr.onload = function() {
    console.log(xdr.responseText)
}
xdr.onerror = function() {
    console.log('Request Error!');
}
xdr.open('get', 'http://bar.com/.php');
xdr.send(null);
<?php
header("Access-Control-Allow-Origin:*");
echo 'xxx';
?>

References:

http://www.html5rocks.com/en/...

阅读 4.4k

2.6k 声望
124 粉丝
0 条评论
你知道吗?

2.6k 声望
124 粉丝
宣传栏