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 相关文章推荐
百度地图自定义控件分享
Mar 04 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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
附件名前加网站名
2008/03/23 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
javascript实现俄罗斯方块游戏的思路和方法
2015/04/27 Javascript
JavaScript正则表达式之multiline属性的应用
2015/06/16 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
Node.js 回调函数实例详解
2017/07/06 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
2019/05/21 Javascript
Vue-Cli项目优化操作的实现
2019/10/27 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python代码太长换行的实现
2019/07/05 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
python如何构建mock接口服务
2021/01/28 Python
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
实现向右循环移位
2014/07/31 面试题
经典c++面试题六
2012/01/18 面试题
一套带网友答案的.NET笔试题
2016/12/06 面试题
师范生实习个人的自我评价
2013/09/28 职场文书
出国留学计划书
2014/04/27 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
升职自荐信范文
2015/03/27 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android