Angular + Asp Core 2 http Post数据始终为null

Question

我很长时间都在努力解决这个问题。

我有一个使用ASP Core 2.1创建的Angular 6和Web Api的客户端应用程序集。

对于我的POST请求，我做了类似的事情。

const params = {
  TestData: newActions,
  ExportAndExecute: true
};

this.httpClient.post('/tests/export', params, {headers: {}}).subscribe((result) => {
  console.log(result);
});

其中httpClient.post方法是：

post(route: string, params: any, headers: object) {
return new Observable<any>(subscriber => {
  this.httpClient.post<any>(this.baseUrl + route, params, headers).subscribe((result) => {
    subscriber.next(result);
  }, (error: Response) => {
    this.handleRequestError(error);
  });
});

}

我的API控制器操作如下所示：

[HttpPost]
[Route("/api/[controller]/export")]
[Authorize(AuthenticationSchemes = "JwtBearer")]
public async Task<HttpStatusCode> ExportTest( [FromBody] ExportTestModel model)
{
    var result = HttpStatusCode.MisdirectedRequest; 
}

而模型类是：

public class ExportTestModel
{
    public List<BsonDocument> TestData { get; set; }
    public bool ExportAndExecute { get; set; }
}

我不知道为什么每次从客户端发送数据时，它在控制器操作中都为空。我试图将其作为字符串化对象发送，在控制器中接收为object或JObject，但没有任何工作正常。

我可以补充一点，如果我收到数据为JObject我可以正确看到它，但我不想这样做。

我觉得很愚蠢，但也许有人可以指出我在做法中做错了什么。

Answer 1

看看你的示例代码，我的想法跳转到两个选项：

1. 错误的标题。因为您明确地将空标头对象设置为第三个参数，所以这可能导致Angular不为您要发送的内容类型添加默认HTTP标头（application / json）。如果你不告诉ASP.NET Core你发送什么样的数据，那么ASP.NET Core不关心它并且不应用模型绑定。这个的修复非常简单，只需删除this.httpClient.post()调用中的第三个参数即可。

   this.httpClient.post('/tests/export', params).subscribe(result => {
     console.log(result);
   });

   您可以通过检查Web开发人员工具栏中的网络流量来验证它设置的此标头。
2. 区分大小写。在JavaScript（以及JSON）中，驼峰套管是标准配置。你的params物体有一个TestData和一个ExportAndExecute，都是pascal-cased。可能是模型装订器对于箱子很敏感。

Answer 2

这适用于我使用Angular 6 HttpClient和Asp.Net Core 2.0或2.1

在你的控制器中：

const params = {
  TestData: newActions,
  ExportAndExecute: true
};

this.dataService.postData(params).subscribe( 
    data => {
       console.log('post OK !');
    },
    error => {
       console.log('post error !');
    }
);

在您的服务中：

  constructor( private http: HttpClient ) {}

  const headers = new HttpHeaders()
     .set('Content-Type', 'application/json')
     .set('Accept', 'application/json')

  const url = 'http://localhost:5000/api/'  

  postData( params ) {
     return this.http.post(
        url + 'grupos',
        JSON.stringify(params),
        { headers: headers }
     );        
  }