详解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 相关文章推荐
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
Ionic项目中Native Camera的使用方法
Jun 07 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 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
咖啡知识大全
2021/03/03 新手入门
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python生成随机密码
2015/03/10 Python
python自定义异常实例详解
2017/07/11 Python
Python3.9新特性详解
2020/10/10 Python
python中用ggplot绘制画图实例讲解
2021/01/26 Python
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
党校自我鉴定范文
2013/10/02 职场文书
董事长秘书岗位职责
2013/11/29 职场文书
工厂保洁员岗位职责
2013/12/04 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
新品发布会主持词
2014/04/02 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
入党推优材料
2014/06/02 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
优秀大专毕业生求职信
2014/08/04 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
高中教师个人工作总结
2015/02/10 职场文书