详解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 相关文章推荐
List the UTC Time on a Computer
Jun 11 Javascript
js模拟弹出效果代码修正版
Aug 07 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
Highcharts使用简例及异步动态读取数据
Dec 30 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
bootstrap css样式之表单
Jan 19 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
JavaScript ES6 Class类实现原理详解
May 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
如何实现php图片等比例缩放
2015/07/28 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
告诉大家什么是JSON
2008/06/10 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
js控制table合并具体实现
2014/02/20 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
详解python和matlab的优势与区别
2019/06/28 Python
详解Django CAS 解决方案
2019/10/30 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python实现队列的方法示例小结【数组,链表】
2020/02/22 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
写给妈妈的道歉信
2014/01/11 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
生物科学专业自荐书
2014/06/20 职场文书
片区教研活动总结
2014/07/02 职场文书
师德师风自我评价范文
2014/09/11 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
高考升学宴主持词
2019/06/21 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS