ASP.NET Core对接Angular提交表单时触发无效操作错误是什么原因？

• Angular端HttpHeaders设置失效：HttpHeaders是不可变对象，调用set()方法会返回全新的头实例，原有代码没有接收返回值，导致请求实际未携带content-type: application/json请求头，ASP.NET Core无法识别请求体格式为JSON
• 后端控制器参数缺少绑定特性：ASP.NET Core对POST请求的复杂类型参数，默认从表单域读取值，前端提交的是JSON格式数据，需要显式指定绑定来源
• 前端提交JSON格式的请求时，请求体不属于表单数据范畴，直接访问Request.Form会触发无效操作异常，该现象属于预期行为

1. 调整前端请求头设置 #

两种方案二选一即可：

方案1：修正HttpHeaders写法（接收set方法返回的新实例） #

// service层代码修正
const customHeaders = new HttpHeaders().set('Content-Type', 'application/json;charset=utf-8');
readonly url = 'http://localhost:43186/ControllerName/AddRecord';

AddSubscription(form: NgForm) {
  return this.http.post<any>(url, form.value, { headers: customHeaders });
}

方案2：删除自定义请求头（推荐） #

Angular的HttpClient提交普通JS对象时，会自动添加Content-Type: application/json请求头，无需手动配置，直接简化代码即可：

// service层代码简化
readonly url = 'http://localhost:43186/ControllerName/AddRecord';

AddSubscription(form: NgForm) {
  return this.http.post<any>(url, form.value);
}

2. 给后端控制器参数添加[FromBody]特性 #

显式告诉ASP.NET Core从请求体中读取JSON并绑定到参数对象：

[HttpPost]
public async Task<ActionResult<ModelClassView>> AddRecord([FromBody] ModelClass objModelClass)
{
    _context.VisitorChildreRequest.Add(objModelClass);
    await _context.SaveChangesAsync();
    // 其余原有逻辑
}

3. 可选校验：检查模型字段匹配 #

确认后端ModelClass类的公共属性名，和前端form.value中的字段名拼写一致（ASP.NET Core默认不区分大小写），比如前端提交的CHILDERN_FULLNAME字段，后端模型需要对应存在：

public class ModelClass
{
    public string CHILDERN_FULLNAME { get; set; }
    // 其余字段对应添加
}

修复后不需要手动读取Request对象的属性，框架会自动把解析好的JSON数据填充到objModelClass参数中，直接使用即可。

内容的提问来源于stack exchange，提问作者Sami