React应用对接ASP.NET Core后端上传文件报400错误求助

以下是针对你遇到问题的排查步骤和解决方法：

1. 后端控制器添加[FromForm]特性（最常见原因） #

ASP.NET Core 默认不会自动从multipart/form-data请求中绑定复杂模型，必须显式指定[FromForm]来告诉框架从表单数据中绑定参数。如果你的控制器方法没有这个特性，框架会尝试从JSON请求体中解析，导致无法获取到FormData里的字段，触发必填验证错误。

修改你的控制器方法：

[HttpPost("Upload")]
public async Task<IActionResult> Upload([FromForm] UploadRequest uploadModel)
{
    // 你的上传逻辑
    return Ok();
}

// 对应的请求模型
public class UploadRequest
{
    [Required]
    public string DeviceName { get; set; }
    [Required]
    public string DataType { get; set; }
    public IFormFile File { get; set; }
}

2. 前端移除手动设置的Content-Type #

当你使用FormData作为请求体时，axios（或其他HTTP库）会自动生成正确的multipart/form-data请求头，包括必要的boundary分隔符。如果手动设置'Content-Type': 'multipart/form-data'，会丢失boundary，导致后端无法解析FormData内容。

修改前端请求代码：

const formData = new FormData();
// 确认键名与后端模型属性名一致（大小写默认不敏感，但建议完全匹配）
formData.append('deviceName', '你的设备名称');
formData.append('dataType', '数据类型');
formData.append('file', 选中的文件对象);

// 不要手动设置Content-Type
axios.post('/api/Main/Upload', formData)
  .then(res => console.log('上传成功'))
  .catch(err => console.error('上传失败', err));

3. 验证FormData内容是否正确 #

在前端控制台打印FormData的所有键值对，确认deviceName和dataType确实已添加：

// 遍历FormData输出所有字段
for (const [key, value] of formData.entries()) {
  console.log(`${key}: ${value}`);
}

如果字段不存在，检查是否在添加后意外重置了FormData，或者拼写错误（比如把dataType写成datatype）。

4. 检查ASP.NET Core配置 #

• CORS配置：确保CORS策略允许multipart/form-data请求头，并且UseCors中间件的位置正确（在UseRouting和UseAuthorization之前）：

  builder.Services.AddCors(options =>
  {
      options.AddPolicy("AllowReactApp", policy =>
      {
          policy.WithOrigins("http://localhost:3000") // 你的React应用地址
                .AllowAnyMethod()
                .AllowAnyHeader();
      });
  });
  
  // 在UseRouting之后，UseAuthorization之前启用CORS
  app.UseCors("AllowReactApp");
  

• 控制器服务配置：确保已添加控制器服务：

  builder.Services.AddControllers();
  

5. 避免错误的请求体格式 #

不要将FormData转成JSON字符串发送，这会导致后端接收到的是纯文本而非表单数据：

// 错误写法：不要用JSON.stringify
axios.post('/api/Main/Upload', JSON.stringify(formData));

// 正确写法：直接传递FormData对象
axios.post('/api/Main/Upload', formData);

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