浅谈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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
React Native实现地址挑选器功能
Oct 24 Javascript
基于vue.js实现购物车
Jan 15 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与javascript的两种交互方式
2006/10/09 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
javascript下高性能字符串连接StringBuffer类
2010/08/16 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
深入分析js的冒泡事件
2014/12/05 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
2016/03/06 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
layer关闭当前窗口页面以及确认取消按钮的方法
2019/09/09 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
python实现FTP循环上传文件
2020/03/20 Python
Python函数参数定义及传递方式解析
2020/06/10 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
医师定期考核实施方案
2014/05/07 职场文书
副处级干部考察材料
2014/05/17 职场文书
生日庆典策划方案
2014/06/02 职场文书
2014年中秋寄语
2014/08/11 职场文书
小学生感恩老师演讲稿
2014/08/28 职场文书
2015年销售员工作总结范文
2015/04/07 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL