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 相关文章推荐
js控制CSS样式属性语法对照表
Dec 11 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
js中跨域方法原理详解
Jul 19 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
详解vue2.0+axios+mock+axios-mock+adapter实现登陆
Jul 19 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
js中Generator函数的深入讲解
Apr 07 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP之uniqid()函数用法
2014/11/03 PHP
php实现图片压缩处理
2020/09/09 PHP
获取JavaScript用户自定义类的类名称的代码
2007/03/08 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JavaScript制作简单的日历效果
2016/03/10 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
2016/05/31 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
Vue.js中组件中的slot实例详解
2017/07/17 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中的字符串替换操作示例
2016/06/27 Python
python机器学习理论与实战(一)K近邻法
2021/01/28 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python面向对象 反射原理解析
2019/08/12 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python读写文件write和flush的实现方式
2020/02/21 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
函数指针的定义是什么
2016/08/14 面试题
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
教师岗位职责范本
2013/12/29 职场文书
致共产党员倡议书
2014/04/16 职场文书
毕业论文评语大全
2014/04/29 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2015年教学工作总结
2015/04/02 职场文书
追讨欠款律师函
2015/05/27 职场文书
士兵突击观后感
2015/06/16 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技