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_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
浅谈jQuery中height与width
Jul 06 Javascript
js实现延时加载Flash的方法
Nov 26 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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 模拟$_PUT实现代码
2010/03/15 PHP
php的sso单点登录实现方法
2015/01/08 PHP
PHP实现倒计时功能
2020/11/16 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
详解jQuery事件
2017/01/13 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
vue实现登陆登出的实现示例
2017/09/15 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
Python文本处理之按行处理大文件的方法
2018/04/09 Python
Python随机函数库random的使用方法详解
2019/08/21 Python
python设置随机种子实例讲解
2019/09/12 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
元旦晚会策划方案
2014/02/18 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
公司担保书格式范文
2014/05/12 职场文书
项目建议书怎么写
2014/05/15 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
关于开学的感想
2015/08/10 职场文书
详解Nginx 工作原理
2021/03/31 Servers
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL