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 web页面刷新的方法收集
Jul 02 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JS中的eval 为什么加括号
Apr 13 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
JS实现简单的二元方程计算器功能示例
Jan 03 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
AngularJS $http post 传递参数数据的方法
Oct 09 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
JavaScript实现格式化字符串函数String.format
2016/12/16 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
在vue.js中抽出公共代码的方法示例
2017/06/08 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
jQuery 操作 HTML 元素和属性的方法
2018/11/12 jQuery
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
python实现无证书加密解密实例
2014/10/27 Python
Python设计模式之代理模式简单示例
2018/01/09 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python实现K折交叉验证法的方法步骤
2019/07/11 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
Collection和Collections的区别
2016/05/02 面试题
幼教个人求职信范文
2013/12/02 职场文书
领导干部考察材料
2014/02/08 职场文书
幼儿园家长评语
2014/02/10 职场文书
幼儿园家长寄语
2014/04/02 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Golang日志包的使用
2022/04/20 Golang
讲解MySQL增删改操作
2022/05/06 MySQL
python解析照片拍摄时间进行图片整理
2022/07/23 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技