• AngularJs最简单解决跨域问题案例


    作者:白狼 出处:http://www.manks.top/angularjs_ajax_jsonp.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛。

    我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题。

    • 客户端 a.com
    • 服务端 b.com或者s.a.com
    • angularJs版本 V1.2.25

    准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴。

    有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还能把花忽悠开了?嗯,我还真能把花写开了。看戏吧,我们本篇要上演的是完整版跨域实例。

    接下来我们先看客户端是如何请求数据的

    注意哦,我们的代码是写在a.com域名下面的

    <!DOCTYPE html>
    <html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="./angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module('app', []);
            app.controller('appCtrl', ['$scope', function ($scope) {
                $http({
                    method: 'JSONP',
                    url: 'http://www.b.com/test.php?callback=JSON_CALLBACK',
                }).success(function (msg) {
                    console.log(data);
                });
                //或者
                $http
                    .jsonp('http://www.b.com/test.php?callback=JSON_CALLBACK')
                    .success(function (msg){
                        console.log(msg);
                    }); 
            }]);
        </script>
    </head>
    <body>
    </body>
    </html>

    我们看到,这里是直接以jsonp的形式进行跨域请求的,其操作同jquery中对跨域的请求方式如出一辙。注意,我们的callback是固定的,即JSON_CALLBACK,尽量不要去做任何改动

    我们再看服务端b.com中的test.php对请求数据的处理方式,这里以原生php的方式做参考

    $callBack = isset($_GET['callback']) ? $_GET['callback'] : DEFAULT_CALLBACK;
    exit($callBack.'('.json_encode($data).')');

    我们再回来看看客户端console.log记录的结果

    ​[考虑目前国内网站大部分采集文章十分频繁,更有甚者不注明原文出处,原作者更希望看客们查看原文,以防有任何问题不能更新所有文章,避免误导!]

    继续阅读

  • 相关阅读:
    面试题15 链表中倒数第k个结点
    面试题14 调整数组顺序使奇数位于偶数前面
    面试题13 在O(1)时间删除链表结点
    面试题12 打印1到最大的N位数
    面试题11 数值的整数次方
    面试题10 二进制中1的个数
    面试题9 斐波那契数列
    面试题8 旋转数组的最小数字
    关于神经网络训练的一些建议笔记
    两篇将rf和boosting方法用在搜索排序上的paper
  • 原文地址:https://www.cnblogs.com/wwolf/p/5510936.html
Copyright © 2020-2023  润新知