Angular HTTP Post Body未发送

Question

我正在尝试复制一个成功的Postman请求，该请求具有单个标头和正文： [{ “attrId”：629， “值”：[ “1000”]， “unitValue”：1， “minValue（最小值）”： “”， “包括maxValue”： “”}]

getData() {

  const data = [{'attrId': 629, 'value': ['1000'], 'unitValue': 1, 'minValue': '', 'maxValue': ''}];

  this.http
    .post('https://jsonplaceholder.typicode.com/posts', data, {
      headers: new HttpHeaders().set('Content-Type', 'application/json')
    })
    .subscribe(
      response => console.log(response.toString()), // Success path
            error => this.handleError(error) // error path
    );
  }

private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
    // A client-side or network error occurred. Handle it accordingly.
    console.error('An error occurred:', error.error.message);
  } else {
    // The backend returned an unsuccessful response code.
    // The response body may contain clues as to what went wrong,
    console.error(
      `Backend returned code ${error.status}, ` +
      `body was: ${error.error}`);
  }
 // return an observable with a user-facing error message
  // return throwError(
  //   'Something bad happened; please try again later.');
}

我从服务器收到404响应。我觉得我没有正确传输这些东西，但它看起来不错。同样奇怪的是，我没有看到Chrome开发工具的网络面板中发送任何内容。控制台中唯一的东西是：

后端返回代码404，正文是：undefined

我错过了什么？

网络标签

控制台标签

我是Angular的新手，所以我可能会遗漏一些明显的东西。服务器已预先存在，我无权访问它。编辑：我改为占位符REST api，我可以测试并得到完全相同的问题所以它显然是我的代码而不是后端的问题。 https://jsonplaceholder.typicode.com/

Answer 1

我认为这是由于引用了JSON数据中的错误。请尝试更改您发送的JSON数据，如下所示。

const data =[{
"attrId": 629,
"value": ["1000"],
"unitValue": 1,
"minValue": "",
"maxValue": ""
}]

并尝试将UTF-8编码添加到内容类型，如下所示

headers.set('Content-Type', 'application/json; charset=utf-8');

Answer 2

试试这个：

getData(data: any) {

let body = JSON.stringify(data);
let headers = new HttpHeaders({ 'Content-Type': 'application/JSON' });

this.http.post<any>(API_URL, data, { headers: headers })
  .subscribe(
        result => { console.log(result); },
        error => { this.handleError(error); },
        () => {});
}

在服务器上，您需要从正文中选择它：

 [HttpPost]
 public IHttpActionResult SomeAction([FromBody]DataClass data)
 {

 }

Answer 3

如果您使用的是Node / Express后端， 确保您有

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());