Why this error coming when angular send data to spring boot backend?

Question

Receiving below warning in spring Terminal:

WARN 7260 --- [nio-8080-exec-1] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: Required request body is missing: public com.chamika.spire.demoapplication.Student com.chamika.spire.demoapplication.MainController.save(com.chamika.spire.demoapplication.Student)]

My Spring boot Maincontroller.java code

@RestController
public class MainController {

  @Autowired
  StudentService studentService;

  @RequestMapping(value = "/student", method = RequestMethod.POST)
  public Student save(@RequestBody Student student) {

  return studentService.save(student);

  }
}

My Angular student.service.ts code

import { Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { Student } from '../models/student'
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';

const headeroption = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  constructor(private http: HttpClient, private router: Router) { }

  url = 'http://localhost:8080/';
  student: Observable<Student[]>;


  save(newStudent: Student) {
    return this.http.post(this.url  + 'student', newStudent, headeroption);
  }
}

My Angular addstudent.component.ts code

import { Student } from './../../models/student';
import { Component, OnInit } from '@angular/core';
import { StudentService } from './../../services/student.service.service'
import { Router } from '@angular/router';

@Component({
  selector: 'app-addstudent',
  templateUrl: './addstudent.component.html',
  styleUrls: ['./addstudent.component.scss']
})
export class AddstudentComponent implements OnInit {

  student: Student = {
    id: null,
    firstName: '',
    lastName: '',
  }

  constructor(private router: Router, private studentService: StudentService) { }

  ngOnInit() {
    this.student = {
      id: null,
      firstName: '',
      lastName: '',
    }

  }

  addStudent(addStu: Student) {
    console.log("Went inside funtion");
    console.log(this.student);
    this.studentService.save(addStu).subscribe((data) => {
      console.log(data);
      this.ngOnInit();
    });
  }

}

I post data using Postman and its worked perfectly. but when i tried to send data using angular UI, its didn't work and receiving above error in spring terminal

Answer 1

This error is showing as you are not sending the required request body properly. Your save method expecting a request body that has Student type. You can create a FormData object in your angular application and then append all the fields inside the FormData object, finally while sending the request to the spring backend bind the Formdata object name as student.

Answer 2

If you say Postman is working fine and from your App it's not, something is wrong with Data you are sending in API call.

If you are using Angular 4+ headers are optional

Try this

save(newStudent: Student) {
    return this.http.post(this.url  + 'student', JSON.stringify(newStudent) );
}

If this doesn't work you can inspect Browser console to see what value is passed in Request and its content-type and add here.

Something like this

Edit 1:

Try this

  save(newStudent: Student) {
    return this.http.post(this.url  + 'student', JSON.stringify(newStudent), headeroption);
  }

EDIT:2

Based on screenshot looks like CORS issue as you are running UI on different port and Spring is running on a different port

Create a WebMvcConfig class like this to allow CrossOrigin

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    private final long MAX_AGE_SECS = 3600;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS").allowedHeaders("*")
                .allowCredentials(true).maxAge(MAX_AGE_SECS);
    }

}