java angularjs 跨域访问_AngularJS实现跨域请求
跨域,前端开发中常常遇到的问题。AngularJS实现跨域方式类似于Ajax。使用CORS机制。
以下阐述一下AngularJS中使用$http实现跨域请求数据。
AngularJS XMLHttpRequest:$http用于读取远程server的数据$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. 在server端设置同意在其它域名下訪问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. 在server端设置同意在其它域名下訪问,及响应类型、响应头设置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;
}
{{ industry.id }} | {{ industry.name_ch }} | {{ industry.name_eu }} | {{ industry.name_jp }} |
java angularjs 跨域访问_AngularJS实现跨域请求相关推荐
- JS跨域访问(ajax跨域)
好吧,国庆有点不务正业,玩了几天游戏,咳咳 感觉还不错,放松下,本来是打算学angular2的,国庆的时候刚好也看到vue2的正式版本发布,恩,最后都没看.. 正言 为什么会出现跨域? 跨域的产生是因 ...
- java angularjs 跨域访问_angularjs跨域post解决方案
AngularJS实现跨域请求跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制.下面阐述一下AngularJS中使用$http实现跨域请求数据.Angul ...
- java接口允许ajax访问_服务允许AJAX请求,允许跨域请求
当工作时间,因为需要JS 进行AJAX请求,这时候存在跨域问题,当出现这种情况时,有多种方案解决比如使用JSONP,也有一种简单的方式,就是在过滤器里面增加返回请求允许跨域head配置. 代码如下: ...
- authorization 传 就跨域_跨域访问接口上传图片出现options请求问题解决方法
1.首先因为服务器端会先发送一个option请求到后台 在后台返回一个post给页面 页面在处理post请求给接口 2.先写一个过滤器, 我们自己定义一个过滤器 package com.adtime ...
- 什么是JS跨域访问 如何实现跨域访问
>什么是跨域? A网站想要获取B网站服务器上的资源,网站通过AJAX发送请求的时候,本地服务器地址与请求地址.协议类型(http).IP地址(域名).端口,三者有其一不同都称之为跨域请求资源. ...
- Spring Boot配置跨域访问策略
From: https://blog.csdn.net/garyond/article/details/80192760 1. 引言 我们在开发过程中通常因为不同应用之间的接口调用或者应用之间接口集成 ...
- 第一百一十期:详解SpringBoot应用跨域访问解决方案
说到跨域访问,必须先解释一个名词:同源策略.所谓同源策略就是在浏览器端出于安全考量,向服务端发起请求必须满足:协议相同.Host(ip)相同.端口相同的条件,否则访问将被禁止,该访问也就被称为跨域访问 ...
- Web应用跨域访问解决方案
Web应用跨域访问解决方案 Web应用的跨域访问解决方案 Web跨域访问解决方案 做过跨越多个网站的Ajax开发的朋友都知道,如果在A网站中,我们希望使用Ajax来获得B网站中的特定内容,如果A网站与 ...
- html的页面怎样直接跨域访问,【HTML】iframe跨域访问问题
概述 本地同一浏览器访问本地HTML文件和访问服务器端HTML文件,本地Iframe没有自适应高度,而服务器端的Ifrane自适应了高度. 1.问题重现: Chrome 版本 41.0.2272.10 ...
最新文章
- 读写xml节点的数据总结
- Nginx服务器版本升级需求分析
- 学习linux/unix编程方法的建议[转]
- ajax实现重新绘图,如何画Flot AJAX更新图
- vs python opencv配置_OPENCV入门教程二:opencv+VS2015开发环境配置
- Jenkins集群搭建
- win10 python ffmpeg推流到b站
- 2021-2027全球与中国创建和销售在线课程平台市场现状及未来发展趋势
- QT(5.12)+Qgis(3.10) 点图层及线图层渲染
- 大数据之电信项目架构
- 河南python培训班
- weixuan -小老弟做鸭(函数)
- 一些开发时的用法经验
- 【B站最良心】2020年中9款热门游戏本最强横评!花8万块买下所有热门游戏本,华硕 天选 联想 拯救者 Y7000P R7000惠普 暗影精灵 6 Plus_哔哩哔哩 (゜-゜)つロ 干杯~-bili
- CSS-使用background实现四个角边框
- 刘强东近期丑闻不断,他会失去对京东的控制权吗?
- android的系统优势,安卓新系统也有优势! 对比iOS一点也不输
- Linux服务器基本安全防范
- kubernetes上部署xwiki
- java 开发学习进阶
热门文章
- 武汉新增职位数同比下降44.25%,这些企业却在猛招人,“来多少,要多少”
- 复制粘贴发明人、Java 和互联网创建者相继去世,向初代互联网大佬致敬!
- 2020 年告别办公室!
- Julia 向 Python 宣战!
- 如何在 Raspberry Pi 上快速安装 Oracle Linux ?
- React 是如何成为跨越前端开发鸿沟的桥梁?
- 大数据时代已来,开发者该如何出击?
- 你还在抱怨开发工具,为什么不动手优化? | 人物志
- “软下来”的苹果和小米能否拯救智能手机的焦虑? | 畅言
- 全球首家机器人酒店“大裁员”!别了,人工智障