Отправить запрос Http в API с объектом в качестве параметра в Angular

Question

У меня есть форма поиска, где я могу заполнить поля ввода в моем веб-приложении. Эти поля ввода окажутся в моем объекте SearchCriteria.

Как только я нажму на кнопку поиска, я хочу отправить этот объект SearchCriteria в API, который вернет коллекцию соответствующих объектов Order. Теперь, когда бэкэнд-код полностью готов, мне просто нужно выполнить правильный вызов API.

Это то, что я пробовал, но мне всегда кажется, что ошибка http 400.

  getOrders(searchCriteria: SearchCriteria): Observable<Order[]> {

    let requestoptions = {
      'headers': new HttpHeaders({'Content-Type': 'application/json'}),
      'withCredentials': true
    };

    return this.http.post(environment.backend + "/api/orders/getOrders", searchCriteria, requestoptions).pipe(map((response: any) => {
      return response;
    }));
  }

URL-адрес запроса будет выглядеть следующим образом:

Request URL:http://localhost:8080/angular-rest/api/orders/getOrders?searchCriteria=%7B%22user%22:%7B%22firstName%22:null,%22lastName%22:null%7D,%22orderMinAmount%22:null,%22orderMaxAmount%22:null,%22orderDate%22:null,%22product%22:%22Phone%22%7D

/ api / orders / getOrders выглядит следующим образом:

@RequestMapping(path = "getOrders", method = POST, consumes = "application/json", produces = "application/json")
public Collection<Order> getOrders(@RequestBody SearchCriteria searchCriteria) {
    return orderService.getOrders(searchCriteria);
}

Теперь я читаю вещи, но не смог понять это.

Что я на самом деле хочу (я думаю), так это отправить объект (searchCriteria) в теле запроса моего http-запроса, чтобы URL-адрес не выглядел так долго и, конечно, http-запрос является успешным.

Что я делаю не так? Что может быть лучше?

Answer 1

Попробуйте вот так

   getOrders(searchCriteria: SearchCriteria): Observable<Order[]> {
          let headers = new HttpHeaders({'Content-Type': 'application/json'}),
          return this.http.post(environment.backend + "/api/orders/getOrders",searchCriteria, {headers})
          .pipe(map((response: any) => {
            return response;
           }));
      }