浅谈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 相关文章推荐
javascript IE中的DOM ready应用技巧
Jul 23 Javascript
Javascript 日期对象Date扩展方法
May 30 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
Jul 04 Javascript
javascript中 try catch用法
Aug 16 Javascript
详解javascript实现自定义事件
Jan 19 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
基于angular实现三级联动的生日插件
May 12 Javascript
浅谈js中的this问题
Aug 31 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 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
Syphon 使用方法
2021/03/03 冲泡冲煮
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
JavaScript asp.net 获取当前超链接中的文本
2009/04/14 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
JQuery实现绚丽的横向下拉菜单
2013/12/19 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jQuery实现tab选项卡效果的方法
2015/07/08 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
Vue强制组件重新渲染的方法讨论
2020/02/03 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
动态创建类实例代码
2009/10/07 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
中学生校园广播稿
2014/01/16 职场文书
教师自我反思材料
2014/02/14 职场文书
爱心捐书活动总结
2014/07/05 职场文书
合作协议书范文
2014/08/20 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014个人年度工作总结
2014/12/15 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
保留意见审计报告
2015/06/05 职场文书
教师法制教育培训学习心得体会
2016/01/14 职场文书