一直都用Jsonp的方式来解决angularjs跨域问题,查询读取信息还可以。如果是遇到比如登陆,需要post用户信息的,这个时候必须要用到post方式。 研究了几天,今天终于测试成功: 感谢谷歌搜索给予很大支持,马上奉上方法吧。 我的server端用的是php作为接口,在post数据的接口处加上下面代码: header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: X-Requested-With'); 然后在angularjs处$http要按照下面方式写: $http({ url:'http://www./index.php?app=api&ac=user&ts=login', method:"POST", headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'email': 'root@qq.com','password': '123456' } }); 按照以上方式处理测试成功。 AngularJS实现跨域请求跨域,前端开发中经常遇到的问题,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."); //允许www.访问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 |
|