Angular5向ASP.NET4.6.1 Web API发送FormData报“不支持的媒体类型”错误求助

我来帮你排查这个问题，通常这个错误是因为请求头配置不对，或者Web API那边没有正确处理multipart/form-data类型的请求，下面是一步步的解决方法：

1. 修正Angular端的请求发送逻辑 #

你现在手动构建FormData的方式没问题，但要注意发送请求时的关键细节：不要手动设置Content-Type为application/json或multipart/form-data。当用Angular的HttpClient发送FormData时，浏览器会自动生成正确的multipart/form-data请求头，还会附带自动生成的boundary分隔符，手动设置反而会导致格式解析失败。

给你一个更可靠的发送示例：

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

public postFormData() {
  const formElement = document.getElementById('customListForm') as HTMLFormElement;
  // 直接把表单元素传给FormData，自动读取所有带name属性的字段，避免手动索引出错
  const formData = new FormData(formElement);

  // 发送请求，无需额外设置headers
  this.http.post('你的API接口地址', formData).subscribe(
    res => console.log('提交成功', res),
    err => console.error('提交失败', err)
  );
}

提示：直接用表单元素初始化FormData，能避免手动append时因索引（form[0]、form[1]）对应错误导致的字段丢失问题，尤其是表单结构变动时更省心。

2. 配置ASP.NET Web API接收FormData #

ASP.NET 4.6.1的Web API默认不会自动从multipart/form-data里解析参数，需要显式标记或配置：

方法一：用[FromForm]标记参数 #

如果你的API Action接收零散参数，给每个参数加上[FromForm]特性，告诉Web API从表单数据中读取：

public IHttpActionResult PostCustomList(
    [FromForm] string tenant,
    [FromForm] string username,
    [FromForm] string password,
    [FromForm] string CL_title,
    [FromForm] string CL_description,
    [FromForm] string CL_contentType
)
{
    // 业务逻辑处理
    return Ok();
}

也可以创建一个DTO类，统一接收表单数据：

public class CustomListDto
{
    public string Tenant { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
    public string CL_title { get; set; }
    public string CL_description { get; set; }
    public string CL_contentType { get; set; }
}

// Action中这样写：
public IHttpActionResult PostCustomList([FromForm] CustomListDto model)
{
    // 业务逻辑处理
    return Ok();
}

方法二：确保Web API支持multipart格式 #

在WebApiConfig.cs中添加配置，让Web API能识别multipart/form-data类型的请求：

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // 其他路由/序列化配置...

        // 允许解析multipart/form-data格式
        config.Formatters.FormUrlEncodedFormatter.SupportedMediaTypes.Add(
            new MediaTypeHeaderValue("multipart/form-data")
        );
    }
}

3. 排查常见坑点 #

• 禁止手动设置Content-Type：如果在Angular请求中手动加了headers: { 'Content-Type': 'multipart/form-data' }，会导致浏览器无法自动添加boundary分隔符，Web API无法解析请求。
• 字段名一致性：确保表单中input的name属性和API参数名一致（ASP.NET默认不区分大小写，但保持一致能避免意外问题），如果名称不一致，可以用[FromForm(Name = "CL_title")]指定对应关系。
• CORS配置：如果前端和API跨域，要确保CORS配置允许multipart/form-data类型的请求，示例配置：

var cors = new EnableCorsAttribute("允许的前端域名", "*", "*");
config.EnableCors(cors);

（生产环境请勿用通配符，要指定具体域名）

4. 调试验证 #

用浏览器开发者工具（F12）打开Network标签，查看发送的请求：

• 检查Request Headers中的Content-Type是否为multipart/form-data; boundary=----WebKitFormBoundaryxxxxxx（带有自动生成的boundary）
• 检查Form Data部分是否正确包含所有字段和对应值

按照上面的步骤调整后，应该就能解决"不支持的媒体类型"的错误了。

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