AngularJs解决跨域简单介绍

快乐打工仔发布于 2年前分类：实例代码

下面直接进入主题介绍一下如何解决此问题。先看客户端是如何请求数据的：

代码是写在a.com域名下面的

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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记录的结果:

前端教程

由此可见，跨域已经成功，总结如下:

（1）.客户端跨域请求的url后追加的参数是?callback=JSON_CALLBACK，参数callback的值指定为JSON_CALLBACK，注意是大写，就是JSON_CALLBACK不要作任何改动，感觉这里是个不小的坑，?callback的值稍作改动，客户端就需要全局定义callback函数，而且还特么怎么再传给$scope处理？为了避免不必要的麻烦，这里建议就这么搞。

（2）.再看服务端，服务端需要指定$callBack = $_GET['callback'];接收callback,而且你还会发现接收的callback不是我们客户端写的?callback的值，客户端指定JSON_CALLBACK应该是为了触发angularJs内部的机制。

AngularJs解决跨域简单介绍，这样的场景在实际项目中还是用的比较多的，关于AngularJs解决跨域简单介绍就介绍到这了。

AngularJs解决跨域简单介绍属于前端实例代码，有关更多实例代码大家可以查看。

我来回复

暂无回复内容