详解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 相关文章推荐
JavaScript 基于原型的对象(创建、调用)
Oct 16 Javascript
事件绑定之小测试  onclick && addEventListener
Jul 31 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
基于javascript实现的搜索时自动提示功能
Dec 26 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
Nov 09 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
微信小程序如何自定义table组件
Jun 29 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
原生js实现自定义滚动条组件
Jan 20 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
ASP和PHP都是可以删除自身的
2007/04/09 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
JavaScript 自动完成脚本整理(33个)
2009/10/20 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
jquery编写Tab选项卡滚动导航切换特效
2020/07/17 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
2018/08/13 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
很酷的小工具和电子产品商城:GearBest
2016/11/19 全球购物
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
工作表扬信的范文
2014/01/10 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
话题作文之生命的旋律
2019/12/17 职场文书
Python进度条的使用
2021/05/17 Python
Python学习之迭代器详解
2022/04/01 Python
Django框架中表单的用法
2022/06/10 Python