Angular: получение Http 400 плохого запроса по почте

У меня есть форма следующим образом

<form #demoForm = "ngForm" (ngSubmit) = "onClickSubmit(demoForm.value)" >
        <input type = "text" name ="fruit" id="add" placeholder = "Enter fruit name" ngModel>
        <input type = "submit" value = "add">
</form>

и следующий метод вызывается при отправке формы

onClickSubmit(data) {
  alert("Entered Fruitname : " + data.fruit);
  console.log(data);
  this.ob = this.http.post("http://localhost:8080/demo/add", data).subscribe();

}

Он регистрирует {fruit: "apple"} в консоли при отправке формы с входным значением apple, однако я получаю http 400 неверный запрос на отправку формы. Я получаю ошибку

error: "Bad Request"
message: "Required String parameter 'fruit' is not present"
path: "/demo/add"
status: 400

Даже если объект содержит поле фруктов, как показано в журнале, почему это все еще приводит к ошибке

Пружинный контроллер

    @Controller 
    @CrossOrigin(origins="*")
    @RequestMapping(path="/demo")
    public class MainController {
      @Autowired
      private FruitsRepository fruitsRepository;

      @PostMapping(path="/add") 
      public void addNewUser(@RequestParam String fruit) {
          Fruits fruits=new Fruits();
          fruits.setName(fruit);
          fruitsRepository.save(fruits);
    }
}

как решить эту проблему?

angular spring-boot http

Всего 3 ответа

@RequestParam String fruit ожидает параметр запроса, а не значение внутри тела запроса. Т.е. запрос с путем http://localhost:8080/demo/add?fruit=apple , а не {"fruit": "apple"} размещен на http://localhost:8080/demo/add .

Вы отправляете весь объект, а не только его имя.
{fruit: "apple"} - это не строка, это объект.

Чтобы отправить только название фрукта (и так, строку), выполните POST следующим образом:

this.ob = this.http.post("http://localhost:8080/demo/add", data.fruit).subscribe();

определить данные какого типа

     onClickSubmit({data}: {data}) {
       alert("Entered Fruitname : " + data.fruit);
       console.log( data);
       this.ob = this.http.post("http://localhost:8080/demo/add", data.fruit).subscribe();

     }

и backend ожидает только строку имени переменной, так как fruit soo отправляет только переменную fruit