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 08 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
JS画5角星方法介绍
Sep 17 Javascript
JavaScript中扩展Array contains方法实例
Aug 23 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
Bootstrap table学习笔记(2) 前后端分页模糊查询
May 18 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
微信小程序实现联动选择器
Feb 15 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 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中ADODB类详解
2008/03/25 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
基于jquery的获取mouse坐标插件的实现代码
2010/04/01 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
2020/06/29 Javascript
js实现表格数据搜索
2020/08/09 Javascript
前端vue+elementUI如何实现记住密码功能
2020/09/20 Javascript
[14:50]2018DOTA2亚洲邀请赛开幕式
2018/04/03 DOTA
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python pexpect ssh 远程登录服务器的方法
2019/02/14 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
Python定义一个函数的方法
2020/06/15 Python
Python 如何展开嵌套的序列
2020/08/01 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
工程业务员岗位职责
2013/12/31 职场文书
列车长先进事迹材料
2014/01/25 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2014年统战工作总结
2014/12/09 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
各种货币符号快捷输入
2022/02/17 杂记