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 Map 和 List 的简单实现代码
Jul 08 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 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/05/29 PHP
php 操作数组(合并,拆分,追加,查找,删除等)
2012/07/20 PHP
php学习笔记之基础知识
2014/11/08 PHP
php 魔术方法详解
2014/11/11 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
Python环境变量设置方法
2016/08/28 Python
Python迭代和迭代器详解
2016/11/10 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python实现k-means聚类算法
2018/02/23 Python
python实现批量转换图片为黑白
2020/06/16 Python
高中化学教学反思
2014/01/13 职场文书
揭牌仪式主持词
2014/03/19 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
计生个人工作总结
2015/02/28 职场文书
行政诉讼答辩状
2015/05/21 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
600字作文之感受大自然
2019/11/27 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL