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

Posted 爱尚丽明

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs最简单解决跨域问题案例相关的知识,希望对你有一定的参考价值。

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

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

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

注意哦,我们的代码是写在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\',\'$http\', function ($scope,$http) {
            $http({
                method: \'JSONP\',
                url: \'http://www.b.com/test.php?callback=JSON_CALLBACK\',
            }).success(function (msg) {
                console.log(msg);
            });
            //或者
            $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).\')\');

以上是关于AngularJs最简单解决跨域问题案例的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 和跨域 POST

tomcat 7服务器跨域问题解决

Spring Boot 最简单的解决跨域问题

Spring Boot 最简单的解决跨域问题

解决由浏览器的同源策略造成的跨域问题-案例

Nginx----跨域,防盗链