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代码
Nov 10 Javascript
JavaScript的面向对象方法以及差别
Mar 31 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
javaScript基础详解
Jan 19 Javascript
bootstrap IE8 兼容性处理
Mar 22 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
微信小程序获取用户绑定手机号方法示例
Jul 21 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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
让这部DC动画新作刷新你的认知
2020/03/03 欧美动漫
php中$this-&amp;gt;含义分析
2009/11/29 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
实例讲解PHP表单处理
2019/02/15 PHP
jQuery+PHP实现图片上传并提交功能
2020/07/27 PHP
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
JavaScript之json_动力节点Java学院整理
2017/06/29 Javascript
VsCode插件整理(小结)
2017/09/14 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python 忽略warning的输出方法
2018/10/18 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
商务主管岗位职责
2013/12/08 职场文书
生物工程专业求职信
2014/09/03 职场文书
2014年学前班工作总结
2014/12/08 职场文书
会议主持词开场白
2015/05/28 职场文书
爱国教育主题班会
2015/08/14 职场文书
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers
nginx实现多geoserver服务的负载均衡
2022/05/15 Servers