POST-запрос завершается неудачно в Angular 7, но работает в jQuery

Question

Я пытаюсь сделать запрос на публикацию в Angular 7. BE ожидает объект JSON в соответствии с этой моделью:

{"event": {"type_id": "31","location_id": "14"}}

Мой код в Angular завершается с ошибкой 400:

addEvent$(): Observable<NewEvent> {
const body = { event: { type_id: 31, location_id: 14 }};
return this.http.post(this.eventsUrl, body, httpOptions)
.pipe(
  tap(
  (eventAdded) => console.log(`Added ${eventAdded}`),
  (error) => of(`Bad request: ${error}`)
  )
);}

const httpOptions = {headers: new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'})};

Подобный запрос POST работает нормально в jQuery:

const data = { event: {type_id: 31, location_id: 14} };
$('.post').click(function(){
    $.post(Url, data, function(data, status) {
        console.log(data, status);
    });
});

Разница, видимая в инструментах разработчика Сеть> Заголовки> Данные формы заключается в том, что Angular пытается отправить {"event": {"type_id": 31, "location_id": 14}} пока jQuery отправляет событие% 5Btype_id% 5D = 31 & событие% 5Blocation_id% 5D = 14

Как мне заставить это работать в Angular?(Изменение на 'Content-Type': 'application / json' тоже не сработало).

Answer 1

Выполните этот запрос без каких-либо httpOptions (по умолчанию httpClient будет использовать application / json, когда тип тела является объектом).Если вам все еще 400, убедитесь, что в вашем приложении нет никаких перехватчиков, которые могли бы помешать.

Answer 2

Объект body не является допустимым представлением json для метода post.

Оберните объект body как JSON.stringify (body), и, надеюсь, он будет работать.

Также проверьте«принимает» заголовок метода сервера.