AngularJS DELETE with Tomcat causes 405 Request method 'DELETE' not supported - rest

Question

I'm using Spring Data Neo4j Rest backend served on Tomcat (8.0.27) with Angular frontend, all served locally at http://localhost:8080/. When I try to delete a record with either $http.delete() or with $resource().delete(), tomcat returns a 405 not supported error.
However, using $http({method: 'DELETE', url: '/competitors/13'}) works fine. Unfortunately, this does not allow me to use the angular $resource service instead of $http, which is my goal. (As an aside, PUT creates the same 405 response as DELETE)
I am also able to use DELETE from command line. This works fine:
curl -X DELETE http://localhost:8080/competitors/13
I have disable csrf in WebSecurityConfig in case that has anything to do with it.
I have also added readonly init-param to web.xml to try to force tomcat to accept DELETE, like so:
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>Proto v2 Application</display-name>
<servlet>
<servlet-name>proto</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>readonly</param-name>
<param-value>false</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>proto</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
Since I've verified that the server is able to perform the delete, I will omit all Java code. Here is my complete .js file with the angular module:
var magneticApp = angular.module('magneticApp', ['ngResource'])
.controller('defaultCtrl', function ($scope, $http, $resource, baseUrl) {
$scope.Competitor = $resource("/competitors/:id", {id: "#id"});
$scope.listItems = function () {
var query = $scope.Competitor.get(function () {
console.log('inside query');
});
query.$promise.then(
function successCallback(data) {
$scope.competitors = data._embedded.competitors;
},
function errorCallback(data) {
console.log('error:');
console.dir(data);
}
);
};
/*
* THIS DELETE FUNCTION RETURNS A 405 NOT SUPPORTED ERROR
*/
$scope.deleteItem = function (item) {
var query = $scope.Competitor.delete({}, item.itemId);
query.$promise.then(
function successCallback(data) {
console.log('success:');
$scope.competitors.splice($scope.competitors.indexOf(item), 1);
},
function errorCallback(data) {
console.log('error:');
console.dir(data);
}
);
};
/*
* THIS DELETE FUNCTION WORKS PROPERLY
*/
$scope.deleteItemWorksCorrectly = function (item) {
$http({method: 'DELETE', url: '/competitors/' + item.itemId})
.then(
function successCallback(data) {
$scope.competitors.splice($scope.competitors.indexOf(item), 1);
},
function errorCallback(data) {
console.log('delete error');
console.dir(data);
}
);
};
$scope.adjustActive = function (item) {
item.id = item.itemId;
console.log('adjustActive');
console.dir(item);
$http.post('/competitors', item)
.success(function (data) {
$http.get('/competitors').success(function (data) {
console.dir(data._embedded.competitors);
$scope.competitors = data._embedded.competitors;
});
});
};
$scope.addItem = function (itemName) {
var item = {name: itemName};
$http.post('/competitors', item)
.success(function (data) {
$http.get('/competitors').success(function (data) {
console.dir(data._embedded.competitors);
$scope.competitors = data._embedded.competitors;
//magneticApp.controller('defaultCtrl').$scope.competitors = data._embedded.competitors;
});
});
};
$scope.listItems();
});
Can anyone shed some light on this? Thanks.