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

Question

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

<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

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

Контроллер Spring равен

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

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

Answer 1

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

Answer 2

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

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

     }

, а бэкэнд ожидает только строку с именем переменной, так как фрукты, таким образом, отправляют только переменную фруктов

Answer 3

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

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

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