浅谈angular.js跨域post解决方案


Posted in Javascript onAugust 30, 2017

跨域,前端开发中经常遇到的问题,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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
ECMAScript6新增值比较函数Object.is
Jun 12 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
JavaScript 点击触发复制功能实例详解
Nov 02 Javascript
Vue 理解之白话 getter/setter详解
Apr 16 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
详解a++和++a的区别
Aug 30 #Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
Aug 30 #Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 #Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 #Javascript
如何理解Vue的render函数的具体用法
Aug 30 #Javascript
微信小程序之发送短信倒计时功能
Aug 30 #Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 #Javascript
You might like
php 获取mysql数据库信息代码
2009/03/12 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
PHP attributes()函数讲解
2019/02/03 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
javascript动态加载二
2012/08/22 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
2014/04/08 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
原生JS轮播图插件
2017/02/09 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
js+html5生成自动排列对话框实例
2017/10/09 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python获取邮件地址的方法
2015/07/10 Python
python异常和文件处理机制详解
2016/07/19 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Django继承自带user表并重写的例子
2019/11/18 Python
python实现微信打飞机游戏
2020/03/24 Python
如何真正的了解python装饰器
2020/08/14 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
部队学习十八大感言
2014/01/11 职场文书
社会实践活动报告
2015/02/05 职场文书
Python如何配置环境变量详解
2021/05/18 Python