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中出现乱码的处理心得
Dec 24 Javascript
图像替换新技术 状态域方法
Jan 28 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
aspx中利用js实现确认删除代码
Jul 22 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
浅谈JavaScript 标准对象
Jun 02 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
Angularjs实现数组随机排序的方法
Oct 02 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
一个比较简单的PHP 分页分组类
2009/12/10 PHP
PHP压缩html网页代码(清除空格,换行符,制表符,注释标记)
2012/04/02 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
基于python的字节编译详解
2017/09/20 Python
Python 加密的实例详解
2017/10/09 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
土建资料员岗位职责
2014/01/04 职场文书
技能竞赛活动方案
2014/02/21 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
程序员求职信
2014/04/16 职场文书
优秀少先队辅导员事迹材料
2014/12/24 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
Python turtle编写简单的球类小游戏
2022/03/31 Python