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

2016-05-20 09:18 82人阅读评论(0) 收藏举报

分类：

javascript（1） 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记录的结果

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

继续阅读

秒客网

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

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

相关文章