Method DELETE with Spring MVC and AngularJS

Question

I have a problem with RESTfull service which should DELETE record from database. When I call function in angular with REST request i receive in FireBug error message : "NetworkError: 403 Forbidden - http://localhost:8080/sake/dict/technologies". The Problem is only with DELETE method - GET, POST work fine.

Service in Angular

(function(angular) {
'use strict';
angular.module('dictionaryService', ['ngResource'])
    .factory('dictTechnologies', [ '$resource', function($resource) {
        return $resource('http://localhost:8080/sake/dict/technologies/:id', {id: '@id' }, {
            query: {method:'GET', isArray:true},
            create: {method:'POST'},
            delete: {method:'DELETE', params: {id: '@id'}}
        });
    }]).factory('dictDocuments', [ '$resource', function($resource) {
        return $resource('http://localhost:8080/sake/dict/documents/:Id', {Id: "@Id" }, {
            query: {method:'GET', isArray:true},
            create: {method:'POST'},
            delete: {method:'DELETE'}
        });
    }]);
})(window.angular);

HTML I press the button

 <button ng-click="deleteBtn()" class="btn btn-primary btn-xs"> Delete [x] </button>

Function in Controller in Angular

$scope.deleteBtn= function() {
        var z = $scope.technologies[1].id; //here is JSON of technologu which I recieved in GET response
        console.log(z);
        dictTechnologies.delete(z).$promise.then(function(z) {
            //if success
        }, function(errResoponse) {

        });
    };

Controller in Java Spring MVC to make example easier I just call System.out.println();

@Controller
@RequestMapping("/dict")
public class SlownikController {


    @Autowired
    SlTechnologiaDao slTechnologiaDao;

//GET work fine
        @RequestMapping(value = "/technologies", method = RequestMethod.GET)
        public @ResponseBody List<SlTechnologia> getAllTechnologies() {
 return slTechnologiaDao.getAllTechnologia();
        }

    @RequestMapping(value = "/technologies/{id}", method = RequestMethod.DELETE)
    public @ResponseBody int deleteTechnology(@RequestParam("id")/* @PathParam("id")*/ Integer id) {
        System.out.println(id);
        return 1;
    }

}

AplicationContext - servlet

<!-- Configure to plugin JSON as request and response in method handler -->
    <bean
        class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
        <property name="messageConverters">
            <list>
                <ref bean="jsonMessageConverter" />
            </list>
        </property>
    </bean>

    <!-- Configure bean to convert JSON to POJO and vice versa -->
    <bean id="jsonMessageConverter"
        class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
    </bean>

I read many pages and everywhere the method is made the same:

@RequestMapping(value = "/technologies/{id}", method = RequestMethod.DELETE)
        public @ResponseBody int deleteTechnology(@RequestParam("id")/* @PathParam("id")*/ Integer id) {
            System.out.println(id);
            return 1;
        }

Thank you in advance for help.

Answer 1

I found solution: How to make Apache Tomcat accept DELETE method

I add to web.xml filter and DELETE work:

<filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <param-value>Accept,Accept-Encoding,Accept-Language,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization,Connection,Content-Type,Host,Origin,Referer,Token-Id,User-Agent, X-Requested-With</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET, POST, PUT, DELETE, OPTIONS, HEAD</param-value>
        </init-param>
    </filter>
<filter-mapping>
    <filter-name>CorsFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

Answer 2

You are passing id as path variable, but trying to get it as a request param. Change your method to

 @RequestMapping(value = "/technologies/{id}", method = RequestMethod.DELETE)
 public @ResponseBody int deleteTechnology(@PathVariable("id") Integer id) {
        System.out.println(id);
        return 1;
 }

@RequestParam is a annotation which indicates that a method parameter should be bound to a web request parameter, while @PathVariable is a one which indicates that a method parameter should be bound to a URI template variable.