Asp.Net Core 6与Angular中Http Post报400错误的解决咨询

1. 修复前端请求序列化问题 #

你当前在PollSave方法里手动用JSON.stringify()处理数组后传给HttpClient.post，但Angular的HttpClient会自动将JavaScript对象序列化为JSON字符串，这会导致后端收到嵌套JSON的字符串，无法匹配Poll[]类型的参数，直接触发模型绑定失败引发400错误。

修改前端代码，移除手动序列化：

public async PollSave(customerPoll: CustomerPoll[]) {
  const headers = { 'content-type': 'application/json'};
  try {
    console.log(customerPoll);
    const results = await firstValueFrom(
      this._httpClient.post(`${this._baseUrl}Poll`, customerPoll, { headers })
      .pipe(catchError((error) => this._handleSaveError(error))
    ));

    // HttpClient自动解析JSON响应，无需重复序列化/反序列化
    this.res = results.data.result;
    console.log(this.res);    
    console.log(results.isSuccess);  
    console.log(results.message);   
    console.log(results.data.result);   
  } catch (error) {
    // 打印完整错误信息便于排查
    console.error('请求错误详情:', error);
  }
}

2. 校验前后端模型字段一致性 #

确保Angular的CustomerPoll接口和Asp.Net Core的Poll类的属性名称、数据类型完全匹配（注意C#默认是PascalCase命名，TypeScript常用camelCase，需统一命名规则）。

如果需要后端兼容camelCase，在Program.cs中添加配置：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = System.Text.Json.JsonNamingPolicy.CamelCase;
    });

3. 验证API路由与请求规范 #

• 确认前端_baseUrl + "Poll"的完整地址与后端路由完全匹配，比如后端控制器若有[Route("api/[controller]")]，则完整路由应为https://localhost:7089/api/Poll，与报错地址一致。
• 后端返回建议用Ok()替代Content("Ok")，更符合REST规范：

  return Ok("Ok");
  

4. 查看详细错误定位问题 #

• 前端：在错误捕获逻辑中打印error.error，400错误通常会返回模型验证失败的具体描述。
• 后端：添加模型验证检查并打印日志：

  [HttpPost]
  public async Task<IActionResult> Insert([FromBody] Poll[] entity)
  {
      if (!ModelState.IsValid)
      {
          var errors = ModelState.SelectMany(x => x.Value.Errors.Select(e => e.ErrorMessage));
          _logger.LogError("模型验证失败: {Errors}", string.Join(", ", errors));
          return BadRequest(ModelState);
      }
  
      var logger = _loggerFactory.CreateLogger<HomeController>();
      logger.LogInformation("Starting Add...");
  
      foreach (var item in entity)
      {
          await _pollService.Insert(item);
      }
  
      return Ok("Ok");
  }
  

5. 检查请求体格式 #

通过浏览器开发者工具的Network标签，查看发送的请求体是否为标准JSON数组格式，例如：

[
  { "name": "选项1", "count": 10 },
  { "name": "选项2", "count": 15 }
]

内容的提问来源于stack exchange，提问作者n.e