title: AngularJS REST Example DELETE method Bad Request 400
body: <p>I'm new to AngularJS and I'm trying to implement a CRUD REST Angular Application.
  As Server for the REST Services I'm using a tomcat 7 server with Jersey.</p>
  
  <p>Until now I managed to implement the GET and POST METHOD as REST services, and they work.
  Actually I'm trying to implment the DELETE Method, but I continue retreiving HTTP Error 400 Bad Request in the Browser. 
  Used Browser is Chrome 29 running on ubuntu OS.</p>
  
  <p>My REST Services</p>
  
  <pre><code>import javax.ws.rs.Consumes;
  import javax.ws.rs.DELETE;
  import javax.ws.rs.GET;
  import javax.ws.rs.PUT;
  import javax.ws.rs.Path;
  import javax.ws.rs.PathParam;
  import javax.ws.rs.Produces;
  import javax.ws.rs.core.Context;
  import javax.ws.rs.core.MediaType;
  import javax.ws.rs.core.Request;
  import javax.ws.rs.core.Response;
  import javax.ws.rs.core.UriInfo;
  import javax.xml.bind.JAXBElement;
  
  @Path("/recipe")
  public class RecipeResource {
  
      @Context
      private UriInfo uriInfo;
      @Context
      private Request request;
  
      private String id;
  
      @GET
      @Produces({ MediaType.APPLICATION_JSON })
      public List&lt;Recipe&gt; getRecipes() {
          List&lt;Recipe&gt; dummyData = new ArrayList&lt;&gt;();
          dummyData.add(new Recipe(new Long(1), "Recipe1", "Description1", null));
          dummyData.add(new Recipe(new Long(2), "Recipe2", "Description2", null));
          dummyData.add(new Recipe(new Long(3), "Recipe3", "Description3", null));
          dummyData.add(new Recipe(new Long(4), "Recipe4", "Description4", null));
          dummyData.add(new Recipe(new Long(5), "Recipe5", "Description5", null));
          dummyData.add(new Recipe(new Long(6), "Recipe6", "Description6", null));
          dummyData.add(new Recipe(new Long(7), "Recipe7", "Description7", null));
          dummyData.add(new Recipe(new Long(8), "Recipe8", "Description8", null));
          dummyData.add(new Recipe(new Long(9), "Recipe9", "Description9", null));
          System.out
                  .println("REST Service Method getRecipes called by JSON Client");
  
          System.out.println("Called URI: " + uriInfo.getAbsolutePath());
          return dummyData;
      }
  
      @GET
      @Produces({ MediaType.TEXT_XML, MediaType.APPLICATION_XML })
      public List&lt;Recipe&gt; getRecipesBrowser() {
          System.out.println("REST Service Method getRecipesBrowser called");
          System.out.println("Called URI: " + uriInfo.getAbsolutePath());
          List&lt;Recipe&gt; dummyData = new ArrayList&lt;&gt;();
          dummyData.add(new Recipe(new Long(1), "Recipe1", "Description1", null));
          dummyData.add(new Recipe(new Long(2), "Recipe2", "Description2", null));
          dummyData.add(new Recipe(new Long(3), "Recipe3", "Description3", null));
          dummyData.add(new Recipe(new Long(4), "Recipe4", "Description4", null));
          dummyData.add(new Recipe(new Long(5), "Recipe5", "Description5", null));
          dummyData.add(new Recipe(new Long(6), "Recipe6", "Description6", null));
          dummyData.add(new Recipe(new Long(7), "Recipe7", "Description7", null));
          dummyData.add(new Recipe(new Long(8), "Recipe8", "Description8", null));
          dummyData.add(new Recipe(new Long(9), "Recipe9", "Description9", null));
  
          return dummyData;
      }
  
      @GET
      @Path("/{id}")
      @Produces({ MediaType.APPLICATION_JSON, MediaType.TEXT_XML,
              MediaType.APPLICATION_XML })
      public Recipe getRecipeById(@PathParam("id") int id) {
          System.out.println("REST Service Method getRecipeById called");
          System.out.println("Called URI: " + uriInfo.getAbsolutePath());
          // if (id.equals("1")) {
          // return new Recipe(new Long(3), "Recipe3", "Description3", null);
          // }
          if (id &lt;= 10) {
              return new Recipe(new Long(id), "Recipe" + id, "Description" + id,
                      null);
          }
  
          return null;
      }
  
      @PUT
      @Path("/{id}")
      @Consumes({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
      public Response updateRecipe(JAXBElement&lt;Recipe&gt; recipe) {
          System.out.println("REST Service Method updateRecipe called");
          System.out.println("Called URI: " + uriInfo.getAbsolutePath());
          Recipe newRecipe = recipe.getValue();
          return Response.created(uriInfo.getAbsolutePath()).build();
      }
  
      @DELETE
      @Path("/{id}")
      @Consumes({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
      public Response deleteRecipe(JAXBElement&lt;Recipe&gt; recipe) {
          System.out.println("REST Service Method deleteRecipe called");
          System.out.println("Called URI: " + uriInfo.getAbsolutePath());
          Recipe newRecipe = recipe.getValue();
          return Response.created(uriInfo.getAbsolutePath()).build();
      }
  
  }
  </code></pre>
  
  <p>The web.xml of my webapp:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
      xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
      id="WebApp_ID" version="2.5"&gt;
      &lt;display-name&gt;com.example.webservice&lt;/display-name&gt;
      &lt;servlet&gt;
          &lt;servlet-name&gt;Jersey REST Service&lt;/servlet-name&gt;
          &lt;servlet-class&gt;com.sun.jersey.spi.container.servlet.ServletContainer&lt;/servlet-class&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;com.sun.jersey.config.property.packages&lt;/param-name&gt;
              &lt;param-value&gt;com.xxxx.yyyyy.services&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;readonly&lt;/param-name&gt;
              &lt;param-value&gt;false&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
      &lt;/servlet&gt;
      &lt;servlet-mapping&gt;
          &lt;servlet-name&gt;Jersey REST Service&lt;/servlet-name&gt;
          &lt;url-pattern&gt;/rest/*&lt;/url-pattern&gt;
      &lt;/servlet-mapping&gt;
      &lt;filter&gt;
          &lt;filter-name&gt;CorsFilter&lt;/filter-name&gt;
          &lt;filter-class&gt;org.apache.catalina.filters.CorsFilter&lt;/filter-class&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;cors.allowed.origins&lt;/param-name&gt;
              &lt;param-value&gt;*&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;cors.allowed.methods&lt;/param-name&gt;
              &lt;param-value&gt;GET,POST,HEAD,OPTIONS,PUT,DELETE&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;cors.allowed.headers&lt;/param-name&gt;
              &lt;param-value&gt;Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;cors.exposed.headers&lt;/param-name&gt;
              &lt;param-value&gt;Access-Control-Allow-Origin,Access-Control-Allow-Credentials&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;cors.support.credentials&lt;/param-name&gt;
              &lt;param-value&gt;true&lt;/param-value&gt;
          &lt;/init-param&gt;
          &lt;init-param&gt;
              &lt;param-name&gt;cors.preflight.maxage&lt;/param-name&gt;
              &lt;param-value&gt;10&lt;/param-value&gt;
          &lt;/init-param&gt;
  
      &lt;/filter&gt;
      &lt;filter-mapping&gt;
          &lt;filter-name&gt;CorsFilter&lt;/filter-name&gt;
          &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
  
      &lt;/filter-mapping&gt;
  &lt;/web-app&gt;
  </code></pre>
  
  <p>And here is the resource defintion from my AngularJS project:</p>
  
  <pre><code>angular.module('myApp.recipeService', ['ngResource']).
  factory('RecipeService', function($resource){
      return $resource('http://localhost\\:10080/CookstarServices/rest/recipe/:recipeId', {}, {
          getRecipes: {method:'GET', params:{recipeId: ''}, isArray:false},
          post: {method:'POST'},
          update: {method:'PUT', params: {recipeId: '@recipeId'}},
          remove: {method:'DELETE'}
      });
  });
  </code></pre>
  
  <p>Has anyone tell me why I getting a Bad Request when trying to call the DELETE method ?
  Any ideas hints are appreciated.</p>