详解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中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
javascript用函数实现对象的方法
May 14 Javascript
js中不同的height, top的区别对比
Sep 24 Javascript
探讨JavaScript语句的执行过程
Jan 28 Javascript
react native实现往服务器上传网络图片的实例
Aug 07 Javascript
浅谈Angular4中常用管道
Sep 27 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 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
php下通过POST还是GET来传值
2008/06/05 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
jQuery插件datatables使用教程
2016/04/21 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
js实现微博发布小功能
2017/01/12 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
2019/11/04 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
python实现简单温度转换的方法
2015/03/13 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
狼和鹿教学反思
2014/02/05 职场文书
挂靠协议书范本
2014/04/22 职场文书
节能环保口号
2014/06/12 职场文书
电子信息工程专业自荐书
2014/06/24 职场文书
2014年施工员工作总结
2014/11/18 职场文书
Django操作cookie的实现
2021/05/26 Python
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers