Angular 5 HttpClient请求体参数无法绑定到ASP.NET Core 2端点

你遇到的核心问题是ASP.NET Core的模型绑定规则和Angular请求格式不匹配，导致后端的jsonData参数无法正确获取请求体里的值。我来一步步帮你解决：

问题根源 #

在ASP.NET Core中，对于string这类简单类型的参数，默认模型绑定规则是从URL查询字符串（QueryString）中取值，而非请求体（Request Body）。所以即便你发送了JSON数据，后端也不会自动从请求体绑定到这个string参数上。另外你的请求拦截器强制设置了Content-Type: application/x-www-form-urlencoded，这和Angular HttpClient默认发送的JSON格式冲突，也是潜在问题之一。

解决方案1：给后端参数添加[FromBody]特性 #

直接修改后端端点方法，明确告诉框架要从请求体中读取参数：

using Microsoft.AspNetCore.Mvc; // 需引入该命名空间

public async Task<int> SaveUserGridSettings([FromBody] string jsonData)
{
    // 可将jsonData反序列化为目标对象，示例：
    // var setting = JsonConvert.DeserializeObject<YourSettingModel>(jsonData);
    return await _repository.InsertOrUpdateAndGetIdAsync(setting);
}

同时调整Angular的请求和拦截器：

1. 拦截器不要强制设置Content-Type为application/x-www-form-urlencoded，保留或显式设置为application/json（Angular HttpClient默认值）：

   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       if (this._cookieService.check('Abp.AuthToken')) {
           let bearerToken = this._cookieService.get('Abp.AuthToken');
           // 仅添加Authorization头，保留原有Content-Type（或显式设置为JSON）
           const authReq = req.clone({
               headers: req.headers.set('Authorization', 'bearer ' + bearerToken)
               // 如需显式设置：.set('Content-Type', 'application/json; charset=UTF-8')
           });
           return next.handle(authReq);
       } else {
           console.log('here');
           return next.handle(req); // 务必返回请求流，避免请求挂起
       }
   }
   

2. Angular的POST请求调整为直接发送序列化后的字符串（匹配后端接收单个string的要求）：

   this.http.post('http://localhost:22742/api/services/app/UserGridSetting/SaveUserGridSettings', JSON.stringify(gridSettingsObject)).subscribe((d: any) => {
       console.log(d);
   });
   

解决方案2：使用DTO类（更推荐的规范写法） #

对于复杂请求参数，推荐创建DTO（数据传输对象）类，模型绑定更清晰，也方便后续扩展：

后端代码 #

// 定义DTO类
public class SaveUserGridSettingsInput
{
    public string JsonData { get; set; }
}

// 修改端点方法
public async Task<int> SaveUserGridSettings([FromBody] SaveUserGridSettingsInput input)
{
    var setting = JsonConvert.DeserializeObject<YourSettingModel>(input.JsonData);
    return await _repository.InsertOrUpdateAndGetIdAsync(setting);
}

Angular请求代码 #

保持你原本的写法即可（发送包含jsonData属性的对象）：

this.http.post('http://localhost:22742/api/services/app/UserGridSetting/SaveUserGridSettings', {
    jsonData: JSON.stringify(gridSettingsObject)
}).subscribe((d: any) => {
    console.log(d);
});

同样记得调整拦截器的Content-Type为application/json（或不强制修改，让Angular默认处理）。

额外检查点 #

• 用浏览器开发者工具（F12）查看Network标签，确认POST请求的Payload内容是否正确。
• 若使用Abp框架，检查Startup.cs中的AddMvc()配置，确保没有影响模型绑定的特殊设置（默认配置通常无问题）。

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