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

来源：互联网发布：空间主页图片网络错误编辑：程序博客网时间：2024/06/06 23:16

原文地址：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记录的结果

到此，也就是说我们跨域请求是成功的！

最后我们做个小总结，注意下其中的重点：

客户端跨域请求的url后追加的参数是?callback=JSON_CALLBACK，参数callback的值指定为JSON_CALLBACK，注意是大写，就是JSON_CALLBACK不要作任何改动，感觉这里是个不小的坑，?callback的值稍作改动，客户端就需要全局定义callback函数，而且还特么怎么再传给$scope处理？为了避免不必要的麻烦，这里建议就这么搞吧
再看服务端，服务端需要指定$callBack = $_GET['callback'];接收callback,而且你还会发现接收的callback不是我们客户端写的?callback的值，客户端指定JSON_CALLBACK应该是为了触发angularJs内部的机制（纯粹瞎猜测，看客们嘴下留言呐～）

以上，个人见解，如果你有自己的观点，欢迎下方评论留言，也可以让我学的更多。

我自己的代码：

<html lang="e<n" ng-app="app" ng-controller="appCtrl"><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', function ($scope) {            $http({                method: 'JSONP',                url: 'url&jsonpcallback=JSON_CALLBACK',            }).success(function (data) {                console.log(data);            });            //或者            $http.jsonp('url&jsonpcallback=JSON_CALLBACK')                .success(function (msg){                    console.log(msg);                });         });    </script></head><body></body>

1 0