在之前写了两篇关于跨域获取接口数据问题的解决方案。本篇将为大家介绍HTML5是如何解决跨域这个问题的。
仅凭HTML5新特性的优势,比起之前两种的解决方案想必这种方式会更加的简便和优雅。
确实如此,且看demo,在本地搭建测试两个测试服务器就不多介绍了,直接看跨域的代码:
1.a.qiusuoweb.com跨域访问页面:
和正常的ajax请求并无二意,在前端页面并不需要做跨域处理
ajax跨域异步请求数据接口$.ajax({
type:"get",
url:"http://api.qiusuoweb.com/api.php?m=api2",
async:true,
dataType:'json',
success:function(data){
console.log(data);
document.getElementById('h1').innerHTML = data.name;
}
});
2.api.qiusuoweb.com接口端php代码
$m = isset($_GET['m'])?$_GET['m']:'';
$data = array(
'url' => 'www.qiusuoweb.com',
'name' => '求索网',
'time' => time(),
'author'=> 'chenxing'
);
if($m){
$m($data);
}
/**
* HTML5新增跨域测试接口
*/
function api2($data){
header('Access-Control-Allow-Origin:http://a.qiusuoweb.com');
echo json_encode($data);
}
整个跨域过程只需要在返回的数据前加上:header('Access-Control-Allow-Origin:http: //a.qiusuoweb.com')即可。也可以通过通配符的方式Access-Control-Allow-Origin:*;通配符允许所有域都可以请求是比较危险的一种行为,慎用。
关键词:Access-Control-Allow-Origin HTML5新增特性。
优点:
这个就像路由器的访问控制列表一样,可以由开发者去主动控制哪些域是可以安全请求的,即满足了跨域要求又不损害其安全性。
处理方便,比起之前的利用jsonp跨域,不需要前后的做处理,只要处理后端的接口代码就可以了。
提高代码的可以拓展性,如果想把项目的接口都加上跨域访问的形式,只要添加头部就行,不用去改其他代码,对原来的非跨域访问也不会造成影响,跨域和非跨域都可以共用同一个接口。
缺陷:
既然是HTML5的特性那么就要考虑浏览器的兼容性了。测试结果很遗憾的告诉你IE10以下的浏览器,都歇菜了。看来这种方式普遍使用还要等几年时光,那些低版浏览器都被市场淘汰了,大家就可以放心大胆的使用了。