详解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 相关文章推荐
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
动态加载jquery库的方法
Feb 12 Javascript
javascript实现链接单选效果的方法
May 13 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
Select2.js下拉框使用小结
Oct 24 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
js实现内置计时器
Dec 16 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 冲泡冲煮
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
Script标签与访问HTML页面详解
2014/01/10 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
AngularJS实现在ng-Options加上index的解决方法
2016/11/03 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
多版本Python共存的配置方法
2017/05/22 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python装饰器原理与用法分析
2018/04/30 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
Woolworth官网:澳洲第一大超市
2017/06/25 全球购物
教师新年寄语
2014/04/03 职场文书
专项法律服务方案
2014/06/11 职场文书
北京奥运会主题口号
2014/06/13 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL