AngularJs解决跨域问题案例详解(简单方法)


Posted in Javascript onMay 19, 2016

首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛。

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

客户端 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解决跨域问题案例详解(简单方法)

到此,也就是说我们跨域请求是成功的!

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

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

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

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
Oct 11 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
jquery cookie的用法总结
Nov 18 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
利用Node.js批量抓取高清妹子图片实例教程
Aug 02 Javascript
使用Cargo工具高效创建Rust项目
Aug 14 Javascript
JavaScript:Array类型全面解析
May 19 #Javascript
JavaScript:Date类型全面解析
May 19 #Javascript
javascript中对Date类型的常用操作小结
May 19 #Javascript
JS Attribute属性操作详解
May 19 #Javascript
jQuery点击输入框显示验证码图片
May 19 #Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
May 18 #Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 #Javascript
You might like
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP 微信支付类 demo
2015/11/30 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例
2020/03/02 PHP
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
浅谈javascript中的作用域
2012/04/07 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
vue中如何让子组件修改父组件数据
2018/06/14 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
JavaScript中将值转换为字符串的五种方法总结
2019/06/06 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python项目打包成二进制的方法
2020/12/30 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
伯利陶器:Burleigh Pottery
2018/01/03 全球购物
物流专业大学生的自我鉴定
2013/11/13 职场文书
2014年政教处工作总结
2014/12/20 职场文书
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Python列表的索引与切片
2022/04/07 Python
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python