Angular 2/4调用ASP.NET WebAPI的PUT方法返回400错误请求

这种情况我之前开发的时候也踩过坑，核心问题就是请求内容格式和WebAPI的参数绑定规则不匹配，咱们分两种场景来解决：

一、保持JSON格式修复400错误 #

默认情况下Angular的HttpClient发送POST/PUT请求时，会把对象序列化为JSON，并且设置Content-Type: application/json，但如果WebAPI没有正确配置参数绑定，就会解析失败返回400。

1. 给WebAPI控制器参数添加[FromBody]特性 #

如果你的控制器方法接收的是复杂对象，一定要加上[FromBody]，告诉WebAPI从请求体的JSON里解析参数：

// 控制器代码示例
[HttpPut]
public IHttpActionResult UpdateItem([FromBody] YourItemModel item)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    // 你的业务逻辑
    return Ok(item);
}

2. 确保WebApiConfig启用JSON格式化器 #

虽然默认配置里已经包含，但可以检查一下，避免被意外修改：

// WebApiConfig.cs
public static void Register(HttpConfiguration config)
{
    // 启用JSON格式支持，确保优先使用JSON
    config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("application/json"));
    
    // 处理Angular camelCase和C# PascalCase的属性名映射
    config.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new CamelCasePropertyNamesContractResolver();
    
    // 其他路由、过滤器配置...
}

3. Angular服务保持默认写法即可 #

Angular 4的HttpClient会自动处理JSON序列化，不用额外设置headers：

// Angular服务代码示例
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { YourItemModel } from './your-item.model';

@Injectable()
export class ItemService {
  constructor(private http: HttpClient) { }

  updateItem(item: YourItemModel) {
    // 直接传递对象，HttpClient会自动转成JSON
    return this.http.put('/api/Items', item);
  }
}

二、使用application/x-www-form-urlencoded格式时修复参数为null的问题 #

如果你确实需要用表单格式提交，要注意Angular的参数构造方式和WebAPI的绑定配置：

1. Angular里用HttpParams构造表单参数 #

不能直接把JSON对象传给请求体，需要转换成键值对格式：

// Angular服务代码示例
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { YourItemModel } from './your-item.model';

@Injectable()
export class ItemService {
  constructor(private http: HttpClient) { }

  createItem(item: YourItemModel) {
    // 把对象属性转换成HttpParams
    const formParams = new HttpParams()
      .set('Name', item.name)
      .set('Description', item.description);

    return this.http.post('/api/Items', formParams, {
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    });
  }
}

2. WebAPI控制器参数添加[FromForm]特性 #

告诉WebAPI从表单字段里解析参数：

// 控制器代码示例
[HttpPost]
public IHttpActionResult CreateItem([FromForm] string Name, [FromForm] string Description)
{
    // 处理逻辑
    return Ok();
}

// 如果是复杂对象，同样可以用[FromForm]
[HttpPost]
public IHttpActionResult CreateItem([FromForm] YourItemModel item)
{
    if (!ModelState.IsValid)
    {
        return BadRequest(ModelState);
    }
    // 处理逻辑
    return Ok(item);
}

额外排查点 #

• 打开浏览器开发者工具的Network标签，查看PUT/POST请求的请求体，确认JSON格式是否正确（有没有语法错误），或者表单参数是否正确传递。
• 检查Angular模型的属性名和WebAPI模型类的属性名是否一致（比如Angular里的name对应C#里的Name，WebAPI默认会处理大小写映射，但如果手动关闭了这个配置就会出问题）。
• 确认WebAPI的路由配置和Angular请求的URL完全匹配，比如PUT请求的路由是不是[Route("api/Items")]。

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