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 相关文章推荐
css值转换成数值请抛弃parseInt
Oct 24 Javascript
js加强的经典分页实例
Mar 15 Javascript
jquery 无限级联菜单案例分享
Mar 26 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
Dec 07 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 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 ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
PHP文件缓存smarty模板应用实例分析
2016/02/26 PHP
CI框架的安全性分析
2016/05/18 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
location.href语句与火狐不兼容的问题
2010/07/04 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
Javascript基础教程之数据类型转换
2015/01/18 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
小程序页面动态配置实现方法
2019/02/05 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Python实现备份MySQL数据库的方法示例
2018/01/11 Python
Sublime开发python程序的示例代码
2018/01/24 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
使用Python获取网段IP个数以及地址清单的方法
2018/11/01 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
详解Python循环作用域与闭包
2019/03/21 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
法学专业个人求职信
2013/09/26 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
职业生涯规划设计步骤
2014/01/12 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
2014年内勤工作总结
2014/11/24 职场文书
新年祝酒词大全
2015/08/11 职场文书
厉行节约工作总结
2015/08/12 职场文书
食品安全主题班会
2015/08/13 职场文书
pandas进行数据输入和输出的方法详解
2022/03/23 Python