jquery ajax rest call - Unsupported Media Type

Question

I'm having a simple jquery ajax call to a rest service. I am setting the contentType as "application/json" and the rest resource is configured to accept "MediaType.APPLICATION_JSON". This is a POST method. With this setup, I am getting "Unsupported Media Type" error.

The header info shows "Content-Type application/json; charset=UTF-8" in the request header

Response shows: Status report: Unsupported Media Type The server refused this request because the request entity is in a format not supported by the requested resource for the requested method (Unsupported Media Type).

Please provide some pointers to resolve this issue.

Here is the code snippet:

Rest Resource

@POST
@Produces({MediaType.APPLICATION_JSON,MediaType.TEXT_HTML})
@Consumes({MediaType.APPLICATION_JSON,MediaType.TEXT_HTML})
public Response addPerson(MyJSONObj myObj) {
    //...  
    // ...
    //...
}

jquery

$(document).ready(function() { /* put your stuff here */
    $("#Button_save").click(function(){
    var firstName = $('firstName').val(); 
    var lastName = $('lastName').val(); 
    var person = {firstName: firstName, lastName: lastName}; 
    $.ajax({

        url:'http://localhost:8080/sampleApplication/resources/personRestService/',
        type: 'POST',
        data: person,
        Accept : "application/json",
        contentType: "application/json",

        success:function(res){
        alert("it works!");
        },
        error:function(res){
            alert("Bad thing happend! " + res.statusText);
        }
    });
    });
}); 

Headers as displayed in FF Firebug

Response Headers

Content-Length  1117
Content-Type    text/html;charset=utf-8
Date    Thu, 05 Apr 2012 09:44:45 GMT
Server  Apache-Coyote/1.1

Request Headers

Accept  */*
Accept-Encoding gzip, deflate
Accept-Language en-us,en;q=0.5
Connection  keep-alive
Content-Length  97
Content-Type    application/json; charset=UTF-8
Host    localhost:8080
Referer http://localhost:8080/sampleApplication/
User-Agent  Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko/20100101 Firefox/11.0
X-Requested-With    XMLHttpRequest

Solution 1

i had the same problem and I was able to solve it that way (see http://www.weverwijk.net/wordpress/tag/jquery/):

$.ajax({
    url:'http://localhost:8080/sampleApplication/resources/personRestService/',
    type:'POST',
    data: JSON.stringify(person),
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    success:function(res){
        alert("it works!");
    },
    error:function(res){
        alert("Bad thing happend! " + res.statusText);
    }
});

On Java side I added these (see Access-Control-Allow-Origin ):

@OPTIONS
public Response testt(@Context HttpServletResponse serverResponse) {
    serverResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    serverResponse.addHeader("Access-Control-Allow-Credentials", "true");
    serverResponse.addHeader("Access-Control-Allow-Origin", "*");
    serverResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
    serverResponse.addHeader("Access-Control-Max-Age", "60");
    return Response.ok().build();
}

@POST
@Produces(MediaType.APPLICATION_JSON)
@Consumes(APPLICATION_JSON)
public Response addPerson(MyJSONObj myObj, @Context HttpServletResponse serverResponse)
    serverResponse.addHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
    serverResponse.addHeader("Access-Control-Allow-Credentials", "true");
    serverResponse.addHeader("Access-Control-Allow-Origin", "*");
    serverResponse.addHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");
    serverResponse.addHeader("Access-Control-Max-Age", "60");

    // ...
    // ...
} 

Conclusion

• JSON Object gets transfered and transformed automagically (more details see Configuring JSON for RESTful Web Services)
• POST commit
• Cross Domain (Same-Origin-Policy)
• Firefox works (see @Option tag)

Solution 2

I think the original post would have worked had the code done two additional things:

set the data to JSON.serialize(person) and set the dataType to 'json' since the contentType was correct, this should work with the @PUT expecting to consume json...

Comments

[First Zero]

Tested the @Options and it does not seem to work, also the header must be set in the response

[Tobias Sarnow]

could you provide more information which error occurs? Because I use this code in all my projects.