浅谈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 相关文章推荐
常用js脚本
Dec 03 Javascript
通过jquery实现tab标签浏览效果
Feb 20 Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
jquery.validate.js插件使用经验记录
Jul 02 Javascript
百度地图api如何使用
Aug 03 Javascript
用 js 的 selection range 操作选择区域内容和图片
Apr 18 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 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
单位速度在实战中的运用
2020/03/04 星际争霸
再次研究下cache_lite
2007/02/14 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
Three.js源码阅读笔记(Object3D类)
2012/12/27 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JavaScript实现广告弹窗效果
2016/08/09 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
JS中传递参数的几种不同方法比较
2017/01/20 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
编写Python脚本批量下载DesktopNexus壁纸的教程
2015/05/06 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
python实现最速下降法
2020/03/24 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
大学生村官任职感言
2014/01/09 职场文书
人力资源主管职责范本
2014/03/05 职场文书
学校督导评估方案
2014/06/10 职场文书
技术员岗位职责范本
2015/04/11 职场文书
观看《信仰》心得体会
2016/01/15 职场文书