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 相关文章推荐
优化Jquery,提升网页加载速度
Nov 14 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
详解node.js的http模块实例演示
Jul 12 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 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 动态执行带有参数的类方法
2009/04/10 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
探索JavaScript中私有成员的相关知识
2019/06/13 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
python 捕获 shell/bash 脚本的输出结果实例
2017/01/04 Python
selenium+python设置爬虫代理IP的方法
2018/11/29 Python
深入理解Django-Signals信号量
2019/02/19 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Speedo速比涛中国官方网站:全球领先泳装运动品牌
2018/04/24 全球购物
兼职学生的自我评价
2013/11/24 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
中考冲刺决心书
2014/03/11 职场文书
收款授权委托书
2014/10/02 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
2015年学校医务室工作总结
2015/07/20 职场文书
新教师2015年度工作总结
2015/07/22 职场文书