HTML5实现跨域问题-求索网

HTML5实现跨域问题

 作者：chenxing  时间：2016-11-01 16:18  评论：

导
读

整个跨域过程只需要在返回的数据前加上：header('Access-Control-Allow-Origin:http://a.qiusuoweb.com')即可。也可以通过通配符的方式Access-Control-Allow-Origin:*；通配符允许所有域都可以请求是比较危险的一种行为，慎用。

HTML5跨域

在之前写了两篇关于跨域获取接口数据问题的解决方案。本篇将为大家介绍HTML5是如何解决跨域这个问题的。

仅凭HTML5新特性的优势，比起之前两种的解决方案想必这种方式会更加的简便和优雅。

确实如此，且看demo,在本地搭建测试两个测试服务器就不多介绍了，直接看跨域的代码：

1.a.qiusuoweb.com跨域访问页面：和正常的ajax请求并无二意，在前端页面并不需要做跨域处理

<!DOCTYPE html>
<html>
o<head>
o<meta charset="UTF-8">
o<title>ajax跨域异步请求数据接口</title>
o<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
o</head>
o<body>
o<h1 id="h1"></h1>
o<script type="text/javascript">
o$.ajax({
otype:"get",
ourl:"http://api.qiusuoweb.com/api.php?m=api2",
oasync:true,
odataType:'json',
osuccess:function(data){
oconsole.log(data);
odocument.getElementById('h1').innerHTML = data.name;
o}
o});
o</script>
o</body>
</html>

2.api.qiusuoweb.com接口端php代码

$m      = isset($_GET['m'])?$_GET['m']:'';
$data = array(
o'url'=> 'www.qiusuoweb.com',
o'name'=> '求索网',
o'time'=> time(),
o'author'=> 'chenxing'
);
if($m){
o$m($data);
}

/**
 * HTML5新增跨域测试接口
 */
function api2($data){
oheader('Access-Control-Allow-Origin:http://a.qiusuoweb.com');
oecho json_encode($data);
}

整个跨域过程只需要在返回的数据前加上：header('Access-Control-Allow-Origin:http: //a.qiusuoweb.com')即可。也可以通过通配符的方式Access-Control-Allow-Origin:*；通配符允许所有域都可以请求是比较危险的一种行为，慎用。

关键词： Access-Control-Allow-Origin HTML5新增特性。

优点：

这个就像路由器的访问控制列表一样，可以由开发者去主动控制哪些域是可以安全请求的，即满足了跨域要求又不损害其安全性。

处理方便，比起之前的利用jsonp跨域，不需要前后的做处理，只要处理后端的接口代码就可以了。

提高代码的可以拓展性，如果想把项目的接口都加上跨域访问的形式，只要添加头部就行，不用去改其他代码，对原来的非跨域访问也不会造成影响，跨域和非跨域都可以共用同一个接口。

缺陷：

既然是HTML5的特性那么就要考虑浏览器的兼容性了。测试结果很遗憾的告诉你IE10以下的浏览器，都歇菜了。看来这种方式普遍使用还要等几年时光，那些低版浏览器都被市场淘汰了，大家就可以放心大胆的使用了。

 最新评论

 tradeOff: 08月30日 10:19

在某些领域国产化是一个迫不得已的事儿

来源：聊聊国产化

 sue: 07月03日 10:24

可以

来源：微信小程序如何获取单个input值

 流年: 07月02日 11:31

不错的尝试

来源：博客系统如何用markdown编辑器发布文章

 诚心: 09月29日 23:01

学到了

来源：如何一次性推送百万级别的消息

 Nick: 04月14日 12:26

网上的资料还是太老，都只是取一个元素，解决了一大难题

来源： redis set集合取出一组数据并删除

 skywalker: 11月03日 18:21

简洁明了

来源： mysql 获取某个日期的前一天或后一天

HTML5实现跨域问题

发布评论

 评论(0)

相关阅读

 近期文章

聊聊国产化

内网穿透工具frp配置详情

mac在终端复制出现乱码00~ *** 01~

php html生成图片

scp命令使用说明

如何在当前目录打开终端

 最新评论