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 相关文章推荐
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
深入分析javascript中console命令
Aug 14 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
Aug 03 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 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求最大子序列和的算法实现
2011/06/24 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
Joomla调用系统自带编辑器的实现方法
2016/05/05 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
Nodejs高扩展性的模板引擎 functmpl简介
2017/02/13 NodeJs
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
vue+axios 前端实现的常用拦截的代码示例
2018/08/23 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
详解Vue数据驱动原理
2020/11/17 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python中单例模式总结
2018/02/20 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
HEMA英国:荷兰原创设计
2018/08/28 全球购物
政治表现评语
2014/05/04 职场文书
商场促销活动总结
2014/07/10 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2014年调度员工作总结
2014/11/19 职场文书
离职感谢信
2015/01/21 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
HTML基础详解(上)
2021/10/16 HTML / CSS