Angular 2 - Post request - Unsupported media type when sending request to Jersey

Question

Dears,

I am sending a post request from Angular 2 to a Java service using Jersey .

Angular code :

 saveProjectDetails(info: any) {
    const body = JSON.stringify(info);
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    alert(body);
    return this.http.post(this.postUrl, body, headers).map((response: Response) => response.text());
  }

Form Input used :

<div class="form-group">
    <div class="row">
      <div class="col-lg-4">
        <input class="form-control" or="effort" name="effort" placeholder="Enter effort" value="208" #effort>
      </div>
      <div class="col-lg-4">
        <input class="form-control" for="crc" name="crc" placeholder="Enter CRC" value="CRC06" #crc>
      </div>
      <div class="col-lg-4">
        <button class="form-control" id="Save" class="btn btn-primary" (click)="onSubmit(effort.value, crc.value)">Save project details</button>
      </div>
    </div>
  </div>

  <p> Response obtained from server is : {{projectSaveResponse}}</p>

Jersey code :

@POST
    @Path("/saveProjectInfo/{projectId}/{application}")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.TEXT_PLAIN)
    @JsonRawValue
    public String saveProjectInfo(@PathParam("projectId") String projectId,
            @PathParam("application") String application,
            @FormParam("effort") String effort, @FormParam("crc") String crc,
            @Context HttpServletRequest request) {

        System.out.println("Effort provided : " + effort);
        System.out.println("CRC provided : " + effort);

        return "Project description saved successfully";
    }

Data being sent is : {"effort": "208", "crc": "123"}

I am getting the error "415 -Unsupported media type" in Angular application

POST http://localhost:8080/ProjectDashboard/rest/jsonServices/saveProjectInfo/134001D01/OPTA 415 (Unsupported Media Type)

Could you please spot the issue.

Update :

I am using the Jersey JAX-RS 2.0 RI bundle .

I am already using genson as JSON provider.

Moreover, the same post call works from postman but is not working and giving error from Angular 2 http service call.

Why are you trying to use `@FormParam`? You need to use a POJO for the entity body param — Paul Samsotha, Mar 13 '17 at 06:06
But that's not how you get it from JSON. That is only used for application/x-www-form-urlencoded data. If you change the client to send that type of data, then it should work. Otherwise, use a POJO on the server side. — Paul Samsotha, Mar 13 '17 at 06:07
If it still doesn't work when you use the POJO, please update your post to show how you did it, and also show your Maven/Gradle dependencies (related to Jersey/Jackson) — Paul Samsotha, Mar 13 '17 at 06:09
Per your update, i marked this post as a duplicate. The RI bundle doesn't come with a JSON provider. Adding just Jackson isn't enough. You need the Jackson _provider_. With this, you will be able to use a POJO parameter for your resource method — Paul Samsotha, Mar 13 '17 at 06:22
Hi , I am already using genson as JSON provider. Moreover, the same post call works from postman but is not working and giving error from Angular http service all. — Kalyan Chavali, Mar 13 '17 at 09:25
Check the browser console. Is it a CORS error (i.e. "No Access-Controll-Blah-Blah")? If so, see http://stackoverflow.com/a/28067653/2587435 — Paul Samsotha, Mar 13 '17 at 09:26
Thats already covered in my web.xml. Have added a CORS filter to tomcat. Also Angular is able to use GET from service, just the POST creates the issue. Moreover, angular app is able to communicate with Content-type -Text/plain but not application/json or application/x-www-urlencoded — Kalyan Chavali, Mar 13 '17 at 09:30
Yes I am getting , Also Angular is able to use GET from service, just the POST creates the issue. Moreover, angular app is able to communicate with Content-type -Text/plain but not application/json or application/x-www-urlencoded for the POST request. — Kalyan Chavali, Mar 13 '17 at 09:32

score 0 · Accepted Answer · answered Mar 14 '17 at 05:37

Dears, I have found the issue with the code. The problem is with both the POST method and the angular HTTP call .

1) The @POST method has been changed to below

    @POST
    @Path("/saveProjectInfo/{projectId}/{application}")
    @Consumes(MediaType.APPLICATION_JSON)
    @Produces(MediaType.APPLICATION_JSON)
    @JsonRawValue
    public String saveProjectInfo(SaveBean input,
            @PathParam("projectId") String projectId,
            @PathParam("application") String application) {

        System.out.println("ProjectId provided : " + projectId);
        System.out.println("Application provided : " + application);
        System.out.println("Effort : " + input.getEffort());
        System.out.println("CRC : " + input.getCrc());

        return "Project description saved successfully";
    }

and the headers are now sent properly in the angular http post call as below as an object instead of a variable

saveProjectDetails(info: any) {
    const body = JSON.stringify(info);
    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    alert(body);
    return this.http.post(this.postUrl, body, {headers: headers}).map((response: Response) => response.text());
  }

Angular 2 - Post request - Unsupported media type when sending request to Jersey

1 Answers1