AngularJS REST Example DELETE method Bad Request 400

Question

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.

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.

My REST Services

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<Recipe> getRecipes() {
        List<Recipe> dummyData = new ArrayList<>();
        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<Recipe> getRecipesBrowser() {
        System.out.println("REST Service Method getRecipesBrowser called");
        System.out.println("Called URI: " + uriInfo.getAbsolutePath());
        List<Recipe> dummyData = new ArrayList<>();
        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 <= 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<Recipe> 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<Recipe> 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();
    }

}

The web.xml of my webapp:

<?xml version="1.0" encoding="UTF-8"?>
<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">
    <display-name>com.example.webservice</display-name>
    <servlet>
        <servlet-name>Jersey REST Service</servlet-name>
        <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
        <init-param>
            <param-name>com.sun.jersey.config.property.packages</param-name>
            <param-value>com.xxxx.yyyyy.services</param-value>
        </init-param>
        <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>Jersey REST Service</servlet-name>
        <url-pattern>/rest/*</url-pattern>
    </servlet-mapping>
    <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
        <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,HEAD,OPTIONS,PUT,DELETE</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.headers</param-name>
            <param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
        </init-param>
        <init-param>
            <param-name>cors.exposed.headers</param-name>
            <param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
        </init-param>
        <init-param>
            <param-name>cors.support.credentials</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>cors.preflight.maxage</param-name>
            <param-value>10</param-value>
        </init-param>

    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>

    </filter-mapping>
</web-app>

And here is the resource defintion from my AngularJS project:

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'}
    });
});

Has anyone tell me why I getting a Bad Request when trying to call the DELETE method ? Any ideas hints are appreciated.

Answer 1

There seems to be a couple of problems here:

1- Looks like you're expecting a recipeId in your DELETE endpoint. But in your resource definition, remove method doesn't set a recipeId parameter.

2- Your deleteRecipe method is a copy of your updateRecipe method, and expects a full Recipe object to be submitted instead of just the recipeId

Hope this helps