专注WEB开发 分享经验,沉淀知识

HTML5实现跨域问题

 作者:chenxing  时间:2016-11-01 16:18  阅读:282  评论:

整个跨域过程只需要在返回的数据前加上: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>
    <head>
        <meta charset="UTF-8">
        <title>ajax跨域异步请求数据接口</title>
        <script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h1 id="h1"></h1>
        <script type="text/javascript">
            $.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;
                }
            });
        </script>
    </body>
</html>

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以下的浏览器,都歇菜了。看来这种方式普遍使用还要等几年时光,那些低版浏览器都被市场淘汰了,大家就可以放心大胆的使用了。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/14.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  38

PHP字符串转数组的三种场景

 2018-05-05 01:32  171

PHP如何遍历字符串?

 2018-05-04 00:56  744

api接口常见的安全问题和解决方案

 2018-05-03 23:20  685

 最新评论

 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 iceyxm: 05月16日 15:00
谜一样的问题,我也遇到了,能改的权限都改了,文件目录属主也改了,然而并没有作用
来源: thinkphp5的mkdir() Permission denied问题探讨
 potatog: 03月27日 15:02
厉害了厉害了,搞了半天我,
来源: thinkphp利用PHPExcel导出数据实践
 aaa: 02月10日 17:02
受教
来源: thinkphp如何有效的设置session过期时间
 风格: 01月17日 09:35
我也是没解决
来源: thinkphp5的mkdir() Permission denied问题探讨
 小胡: 01月14日 14:28
非常感谢!使用非常便捷~
来源: thinkphp利用PHPExcel导出数据实践