AngularJs最简单解决跨域问题案例
分类：
作者：白狼 出处：http://www.manks.top/angularjs_ajax_jsonp.html 本文版权归作者，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
首先我们做点准备说明，不然你明白我说的是啥意思别人不明白，就算别人明白了那总有人不明白，那你要说了，我的意思是这个说明必须要做了，答案是必须的，为了更好的方便大家理解嘛。
我们以两个主域名或者一个主域名+一个二级域名为例，均可演示跨域问题。
- 客户端 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最简单解决跨域问题案例的更多相关文章
- 详解Jquery和AngularJs，Servlet中jsonp解决跨域问题(转)
众所周知,jsonp可以解决跨域问题,下面是我在查阅资料和实际项目使用后的一些总结. Jquery中jsonp的使用 //myUrl = "http://localhost:8090/api ...
- 【Nginx】使用Nginx如何解决跨域问题？看完这篇原来很简单！！
写在前面 当今互联网行业,大部分Web项目基本都是采用的前后端分离模式.前端为H5项目,后端为Java.PHP.Python等项目.而且大部分后端服务并不会只部署一套服务,而是会采用Nginx对后端服 ...
- CORS-跨域资源共享 解决跨域问题
1.什么是跨域? a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容,但是我们在项目开发时,经常遇到一个页 ...
- PhoneGap开发跨平台移动APP - 解决跨域资源共享
解决跨域资源共享 一.WebApi解决跨域资源共享. 开发中选择WebApi来作为服务端的数据接口,由于使用PhoneGap,就需要通过js来获取远程远程数据服务器的数据,由于同源策略的限制,这就涉及 ...
- 使用nginx解决跨域问题（flask为例）
背景 我们单位的架构是在api和js之间架构一个中间层(python编写),以实现后端渲染,登录状态判定,跨域转发api等功能.但是这样一个中间会使前端工程师的工作量乘上两倍,原本js可以直接ajax ...
- ajax 、ajax的交互模型、如何解决跨域问题
1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...
- 最简单实现跨域的方法：用 Nginx 反向代理
本文作者: 伯乐在线 - 良少 .未经作者许可,禁止转载!欢迎加入伯乐在线 专栏作者. 什么是跨域 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascrip ...
- 一步一步学习SignalR进行实时通信_3_通过CORS解决跨域
原文:一步一步学习SignalR进行实时通信_3_通过CORS解决跨域 一步一步学习SignalR进行实时通信\_3_通过CORS解决跨域 SignalR 一步一步学习SignalR进行实时通信_3_ ...
- html5中的postMessage解决跨域问题
解决跨域问题的方法有很多,如:图像ping(简单).jsonp(缺点是不能实现跨域post).CROS(CORS的本质让服务器通过新增响应头Access-Control-Allow-Origin,通过 ...
随机推荐
- Dynamics CRM 2015-Data Encryption激活报错
在CRM的日常开发中,Data Encryption经常是不得不开启的一个功能.但是有时,我们可能遇到一种情况,Organization导入之后,查看Data Encryption是已激活的状态,但是 ...
- php+websocket搭建简易聊天室实践
1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...
- win10电脑优化
Windows10必做的优化 --道心 关闭服务 右键点击"此电脑",选择"管理",进入"计算机管理"窗口. 在左侧的菜单选择"服 ...
- TCP三次握手图解
- 镜像切换Logreader Agent报错：分发数据库中可能存在不一致的状态（续）
报错: 分发数据库中可能存在不一致的状态: dist_backup_lsn {00000030:000001ba:0004},dist_last_lsn {00000030:000001cd:0004 ...
- Azure 上通过 SendGrid 发送邮件
SendGrid 是什么? SendGrid 是架构在云端的电子邮件服务,它能提供基于事务的可靠的电子邮件传递. 并且具有可扩充性和实时分析的能力.常见的用例有: 自动回复用户的邮件 定期发送信息给用 ...
- Javascript之函数模型
分析: 对于js自定义函数,函数体的内容大致可抽象为:变量(局部变量,由var关键字定义,全局变量)和函数(一般函数,匿名函数,闭包函数). function SelfDefineFunc() { v ...
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
- angular2系列教程（五）Structural directives、再谈组件生命周期
今天,我们要讲的是structural directives和组件生命周期这两个知识点.structural directives顾名思义就是改变dom结构的指令.著名的内建结构指令有 ngIf, n ...
- SQL 性能调优中可参考的几类Lock Wait
在我们的系统出现性能问题时,往往避不开调查各种类型 Lock Wait,如Row Lock Wait.Page Lock Wait.Page IO Latch Wait等.从中找出可能的异常等待,为性 ...