angularJs解决跨域问题-最简单的完美实例

最新推荐文章于 2022-02-17 08:39:07 发布

weixin_33923762

最新推荐文章于 2022-02-17 08:39:07 发布

阅读量304

点赞数

文章标签： php javascript 运维 ViewUI

原文链接：https://my.oschina.net/manks/blog/610720

版权

为什么80%的码农都做不了架构师？>>>

1、准备说明：

客户端 http://www.aaa.com

服务端 http://www.bbb.com 或者 http://service.aaa.com

现在a站点和b站点为不同域名。

angularJs版本：v1.2.25

我们先上代码，[总结里面再做说明]

2、客户端代码：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./angular.min.js"></script>
    <script type="text/javascript">
    var app = angular.module('app', []);
    app.controller('testCtrl', ['$scope', function ($scope) {
        $http({
            method: 'JSONP',
            url: 'http://www.bbb.com/test.php?callback=JSON_CALLBACK',
        }).success(function (data, status) {
            console.log(data);
        });
        
        //或者使用下面的代码效果是一样的
        $http
            .jsonp('http://www.bbb.com/test.php?callback=JSON_CALLBACK')
            .success(function (data){
                console.log(data);
            }); 
    }]);
    </script>
</head>
<body>
</body>
</html>

3、服务端代码：

$callBack = $_GET['callback']; //不存在可以自己判断后指定即可
exit($callBack.'('.json_encode($data).')');

4、客户端效果：

5、总结：

1、客户端请求的url地址后面追加参数?callback即可

2、参数callback的值指定为JSON_CALLBACK，注意是大写，就是JSON_CALLBACK不要作改动，这里是个坑，?callback的值稍作改动，客户端就需要全局定义callback函数，而且还特么怎么再传给$scope处理？为了避免不必要的麻烦，这里就这么搞吧

3、服务端需要指定$callBack = $_GET['callback'];接收callback,而且你还会发现接收的callback不是我们客户端写的?callback的值，客户端指定JSON_CALLBACK应该是为了触发angularJs内部的机制（纯粹瞎猜测，看客们嘴下留言呐～）

4、客户端success方法拿到服务端数据，$scope可以任其所谓了，啊哈哈哈，到此结束！

转载于:https://my.oschina.net/manks/blog/610720