XMLHttpRequest无法加载http:// localhost:8080 / my.rest.service / api / order / addOrder.请求资源上不存在“访问控制允许源”标头.因此,原“http:// localhost”不允许访问.
泽西REST Post功能
我启用了(我认为是)适当的标题:Access-Control-Allow-Origin和Access-Control-Allow – 方法的响应,如下面的方法所示:
@POST @Produces(MediaType.APPLICATION_JSON) @Consumes(MediaType.APPLICATION_JSON) @Path("/addOrder") public Response addOrder(DBObject dbobject) { DB db = mongo.getDB("staffing"); DBCollection col = db.getCollection("orders"); col.insert(dbobject); ObjectId id = (ObjectId)dbobject.get("_id"); return Response.ok() .entity(id) .header("Access-Control-Allow-Origin","*") .header("Access-Control-Allow-Methods","GET,POST,DELETE,PUT") .allow("OPTIONS") .build(); }
角度JS控制器
我已经声明了应用程序并配置了$httpProvider与所有在类似Stack Overflow中建议的设置问题:
var staffingApp = angular.module('myApp',['ngRoute','ui.bootstrap']); myApp.config(['$httpProvider',function ($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; $httpProvider.defaults.headers.common["Accept"] = "application/json"; $httpProvider.defaults.headers.common["Content-Type"] = "application/json"; }]);
我也创建了这个控制器来打开一个模态并处理窗体:
var modalCtrl = function($scope,$modal,$log,$http,$location) { $scope.order = { activityTitle : null,anticipatedAwardDate : null,component : null,activityGroup : null,activityCategory : null,activityDescription : null }; $scope.open = function () { var modalInstance = $modal.open({ templateUrl: 'addOrder.html',windowClass: 'modal',controller: modalInstanceCtrl,resolve: { order : function () { return $scope.order; } } }); modalInstance.result.then(function (oid) { $log.info("Form Submitted,headed to page..."); $location.path("/orders/" + oid); },function() { $log.info("Form Cancelled") }); }; }; var modalInstanceCtrl = function ($scope,$modalInstance,order) { $scope.order = order,$scope.ok = function () { $log.log('Submitting user info'); $log.log(order); $log.log('And now in JSON....'); $log.log(JSON.stringify(order)); $http.post('http://localhost:8080/my.rest.service/api/order/addOrder',JSON.stringify(order)).success(function(data){ $log.log("here's the data:\n"); $log.log(data); $modalInstance.close(data._id.$oid) }); }; $scope.cancel = function () { $modalInstance.dismiss('cancel'); }; }; myApp.controller('modalCtrl',modalCtrl);
无济于事,我试过:
>从响应头删除.allow(“OPTIONS”).
>从应用程序中删除$httpProvider配置
>将$httpProvider配置更改为调用myApp.config(function($httpProvider){…}),传递函数本身而不是数组.
使用相同的配置获取请求:
@GET @Path("/listall/") @Produces(MediaType.APPLICATION_JSON) public Response listAll(){ DB db = mongo.getDB("staffing"); DBCollection col = db.getCollection("orders"); List<DBObject> res = col.find().limit(200).toArray(); return Response.ok() .entity(res.toString()) .header("Access-Control-Allow-Origin",PUT") .allow("OPTIONS") .build(); }
这个控制器工作正常:
myApp.controller('orderListCtrl',function ($scope,$http){ $http.get('http://localhost:8080/my.rest.service/api/order/listall').success(function(data) { for (var i = 0; i < data.length; i++) { if (data[i].description.length > 200) { data[i].shortDesc = data[i].description.substring(0,196) + "..."; } else { data[i].shortDesc = data[i].description; } }; $scope.orders = data; }); });
更新#1:
我在同一个原始基础上尝试过相同的请求,基本上是在从locahost:8080的REST服务旁边服务Angular应用程序.这个配置是有效的,但需要稍微改动,并且在我的代码中进行了一些一般的清理,我在上面编辑过.
邮政仍然作为CORS请求失败,但是我仍然在寻找这个配置中缺少的部分.
更新#2:
我调查了工作请求的头文件,并将其与非工作请求进行比较.
不工作的请求返回带有响应的头文件,但是缺少Access-Control-Allow-Origin标头:
我相信现在这个问题已经成为一个问题,在返回给客户端之前,将这些标题从响应中删除,这样会导致浏览器的请求失败.
更新#3:
从Chrome的REST控制台扩展程序向同一个URL提交测试POST请求返回相应的响应标头,如下面的屏幕截图所示.
解决方法
我可以通过下载和实现这个页面上找到的CORS过滤器来解决这个问题:http://software.dzhuvinov.com/cors-filter-installation.html.
如果您遇到类似的问题,请按照说明进行测试,以查看您的OPTIONS请求不再失败,并且紧随其后的成功请求.