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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
原生js实现公告滚动效果
Jan 10 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
浅谈Laravel中的一个后期静态绑定
2017/08/11 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
2019/05/13 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python实现两款计算器功能示例
2017/12/19 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
python 实现批量图片识别并翻译
2020/11/02 Python
python 发送get请求接口详解
2020/11/17 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
教师辞职报告范文
2014/01/20 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
开展党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014年消防工作总结
2014/11/21 职场文书
java解析XML详解
2021/07/09 Java/Android