Angular 16向API发送数据时后端始终接收null值的问题

我来帮你排查这个问题～你遇到的核心问题是手动设置了multipart/form-data请求头，但发送的内容并不是标准的表单格式，加上Angular的HttpClient对请求头有自动处理逻辑，导致后端接收不到数据，甚至出现请求头和预期不符的情况。

先拆解下你当前代码的问题：

• 你定义的formData是普通字符串，不是真正的FormData对象。Angular的HttpClient看到普通字符串时，默认会把它当作JSON数据处理，自动将请求头设为application/json，这就是你后来发现的请求头异常的原因。
• 后端用[FromForm]标记参数，期待接收表单格式的数据，但你发送的是纯字符串，格式完全不匹配，所以后端只能拿到null。

下面给你两种针对性的解决方案，根据你的实际需求选择：

方案一：发送标准FormData（适合带文件上传的场景） #

如果你的需求是上传文件或者提交表单数据，必须创建真正的FormData对象，同时不要手动设置请求头：

Angular代码修改：

createNormalPost(post: CreateNormalPostInterface) {
  // 创建FormData实例
  const formData = new FormData();
  // 把需要传递的字段逐个添加到FormData中
  formData.append('title', post.title);
  formData.append('content', post.content);
  // 如果需要上传文件：formData.append('postFile', post.file);

  // 重点：不要手动设置Content-Type！HttpClient会自动为FormData添加正确的multipart/form-data头（包含边界符）
  return this.httpClient.post<any>(this.API, formData);
}

后端代码优化：

建议创建对应的DTO类来接收表单数据，比单个字符串更规范：

// 先定义一个接收数据的DTO
public class CreateNormalPostDto
{
    public string Title { get; set; }
    public string Content { get; set; }
    // 如果有文件：public IFormFile PostFile { get; set; }
}

// 控制器方法修改
[HttpPost]
public async Task<IActionResult> CreatePostNormalAsync([FromForm] CreateNormalPostDto post)
{
    try
    {
        Console.WriteLine($"标题：{post.Title}，内容：{post.Content}");
        //var response = await _postService.CreatePostNormalAsync(post);
        return Ok(post);
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, ex.Message);
        return StatusCode(StatusCodes.Status500InternalServerError, ex.Message);
    }
}

方案二：发送JSON格式数据（无文件上传时更简单） #

如果不需要上传文件，用JSON格式传递数据会更简洁，不需要用到FormData：

Angular代码修改：

createNormalPost(post: CreateNormalPostInterface) {
  // HttpClient默认会把对象序列化为JSON，自动设置Content-Type为application/json
  return this.httpClient.post<any>(this.API, post);
}

后端代码修改：

只需要把[FromForm]改成[FromBody]，告诉后端从请求体的JSON中解析数据：

[HttpPost]
public async Task<IActionResult> CreatePostNormalAsync([FromBody] CreateNormalPostDto post)
{
    try
    {
        Console.WriteLine($"标题：{post.Title}，内容：{post.Content}");
        //var response = await _postService.CreatePostNormalAsync(post);
        return Ok(post);
    }
    catch (Exception ex)
    {
        _logger.LogError(ex, ex.Message);
        return StatusCode(StatusCodes.Status500InternalServerError, ex.Message);
    }
}

补充说明下你发现的请求头问题：当你手动设置multipart/form-data但没有提供标准FormData时，Angular会因为数据类型不匹配自动调整请求头，导致实际发送的是application/json。正确的做法是，发送FormData时让HttpClient自动处理请求头，它会加上必要的边界标识（比如multipart/form-data; boundary=----WebKitFormBoundaryxxxx），后端才能正确解析表单数据。

备注：内容来源于stack exchange，提问作者Tălpău Mircea Cristian