详解AngularJS如何实现跨域请求


Posted in Javascript onAugust 22, 2016

跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制。

下面阐述一下AngularJS中使用$http实现跨域请求数据。

AngularJS XMLHttpRequest:$http用于读取远程服务器的数据

$http.post(url, data, [config]).success(function(){ ... });
$http.get(url, [config]).success(function(){ ... });
$http.get(url, [config]).success(function(){ ... });

一、$http.jsonp【实现跨域】

1.指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。

2.指定其它回调函数,但必须是定义在window下的全局函数。url中必须加上callback

二、$http.get【实现跨域】

1.在服务器端设置允许在其他域名下访问

response.setHeader("Access-Control-Allow-Origin", "*"); //允许所有域名访问
response.setHeader("Access-Control-Allow-Origin", "http://www.123.com"); //允许www.123.com访问

2.AngularJS端使用$http.get()

三、$http.post【实现跨域】

1.在服务器端设置允许在其他域名下访问,及响应类型、响应头设置

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods","POST");
response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type");

2.AngularJS端使用$http.post() ,同时设置请求头信息

$http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
  $scope.industries = data;
 });

四、实现方式

跨域方式一JSONP】:

方法一:

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=JSON_CALLBACK&siteid=137bd406").success(function(data){ ... });
// The name of the callback should be the string JSON_CALLBACK.

方法二【返回值,需要使用对应callback方法接收,但如何置于$scope?】:

$http.jsonp("http://localhost/sitesettings/getBadgeInfo.pt?jsonp=badgeabc&siteid=137bd406");
function badgeabc(data){ ... }

public String execute() throws Exception { 
 String result = FAIL;
 response.setHeader("", "");
 SiteHandlerAction siteHandlerAction = (SiteHandlerAction)BeansFactory.getBean(SiteHandlerAction.class);
 BadgeHandlerAction badgeHandlerAction = (BadgeHandlerAction)BeansFactory.getBean(BadgeHandlerAction.class);
 if("".equals(siteid) || siteid == null || StringUtils.isBlank("jsonp")){
  result = FAIL;
 }else{
  Site site = siteHandlerAction.find(siteid);
  UserBadgeStatus userBadgeStatus = badgeHandlerAction.getUserBadgeStatus(site.getId());
  if(userBadgeStatus != null){
   result = "{\"t\":"+userBadgeStatus.getStyle()+",\"l\":"+userBadgeStatus.getSuspend_location()+",\"s\":"+site.getId()+"}";
   JSONObject jsonObj = JSONObject.fromObject(result);
   String json = jsonObj.toString();
   result = jsonp + "(" + json + ")";
  }
 }
 PrintWriter write = response.getWriter();
 write.print(result);
 write.flush();
 write.close();
 return NONE;
}

跨域方式二$http.get() 】:

function getAdustryController($scope,$http){
 $http.get('http://localhost/ajax/getAllIndustryCategoty.pt?languageColumn=name_eu').success(function(data){
  $scope.industries = data;
 });
}

跨域方式三$http.post()】:

function getAdustryController($scope,$http){
 $http.post('http://localhost/ajax/getAllIndustryCategoty.pt',{languageColumn:'name_eu'},{'Content-Type':'application/x-www-form-urlencoded'}).success(function(data){
  $scope.industries = data;
 });
}

// java端支持跨域请求
public String execute(){
 response.setHeader("Access-Control-Allow-Origin", "*"); //允许哪些url可以跨域请求到本域
 response.setHeader("Access-Control-Allow-Methods","POST"); //允许的请求方法,一般是GET,POST,PUT,DELETE,OPTIONS
 response.setHeader("Access-Control-Allow-Headers","x-requested-with,content-type"); //允许哪些请求头

可以跨域

SiteHandlerAction SiteHandler = (SiteHandlerAction) BeansFactory.getBean(SiteHandlerAction.class);
List list = SiteHandler.getAllIndustryCategory(); //所有的分类集合
JSONArray jsonArray = JSONArray.fromObject(list); //将list转为json
String json = jsonArray.toString(); //转为json字符串
try {
 PrintWriter write = response.getWriter();
 write.print(json);
 write.close();
} catch (IOException e) {
 e.printStackTrace();
}
return NONE;
}

总结

以上就是本文的全部内容,希望本文的内容能对大家学习使用AngularJS有所帮助。

Javascript 相关文章推荐
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
js实现的tab标签切换效果代码分享
Aug 25 Javascript
20分钟轻松创建自己的Bootstrap站点
May 12 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
AngularJS2 与 D3.js集成实现自定义可视化的方法
Dec 01 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
ant design vue datepicker日期选择器中文化操作
Oct 28 Javascript
深入浅析JS Function()构造函数
Aug 22 #Javascript
深入浅析jQuery对象$.html
Aug 22 #Javascript
基于JavaScript实现添加到购物车效果附源码下载
Aug 22 #Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 #Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 #Javascript
JavaScript代码里的判断小结
Aug 22 #Javascript
angularjs 源码解析之scope
Aug 22 #Javascript
You might like
Dedecms常用函数解析
2008/02/01 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
基于PHP实现用户注册登录功能
2016/10/14 PHP
Javascript 命名空间模式
2013/11/01 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
2014/04/10 Javascript
jQuery新的事件绑定机制on()示例应用
2014/07/18 Javascript
jQuery实现控制文字内容溢出用省略号(…)表示的方法
2016/02/26 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
在Python下尝试多线程编程
2015/04/28 Python
Python装饰器用法示例小结
2018/02/11 Python
学习python分支结构
2019/05/17 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
call在Python中改进数列的实例讲解
2020/12/09 Python
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
扩大国家免疫规划实施方案
2014/03/21 职场文书
销售类求职信
2014/06/13 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
Spring Boot两种全局配置和两种注解的操作方法
2021/06/29 Java/Android
Android自定义双向滑动控件
2022/04/19 Java/Android
服务器SVN搭建图文安装过程
2022/06/21 Servers
Redis+AOP+自定义注解实现限流
2022/06/28 Redis