Question

我正在尝试在Angular 7中发出发布请求。BE希望根据此模型使用JSON对象：

{“事件”：{“ 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发送 event％5Btype_id％5D = 31＆event％5Blocation_id％5D = 14

如何在Angular中进行这项工作？（更改为“ Content-Type”：“ application / json” 也不起作用）。

Answer 1

body对象不是post方法的有效json表示形式。

请将您的body对象包装为JSON.stringify（body），希望它可以正常工作。

还要检查服务器方法的“ accepts”标头。

Answer 2

在没有任何httpOptions的情况下执行该请求（默认情况下，当主体的类型是对象时，httpClient将使用application / json）。如果仍然是400，请绝对确保您的应用程序其他地方没有任何可能干扰的拦截器。

POST请求在Angular 7中失败，但在jQuery中有效

2 个答案: