Vue3向.NET API提交JSON时持续出现400错误求助

使用Vue3调用POST接口 http://localhost:5081/Purchasing/TestCall/190200 时，始终返回400 Bad Request错误。提交的JSON对象列表与API预期接收类型一致，但问题依旧，以下是相关代码与数据信息：

Vue请求代码 #

const requestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',

    },
    body: JSON.stringify(lstOrders.value),
};
fetch("http://localhost:5081/Purchasing/TestCall/"+ workOrder.value, requestOptions)

后端生成待提交数据的代码 #

//return Ok(lstPDFs.OrderBy(x => x.FileName));
return Ok(JsonSerializer.Serialize(lstPDFs.OrderBy(x => x.FileName)));

提交的JSON数据示例（console.log输出） #

[[Target]]:Array(10)
0:{AutoID: 0, FileName: '4700.9359', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
1:{AutoID: 0, FileName: 'I_101', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
2:{AutoID: 0, FileName: 'I_102', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
3:{AutoID: 0, FileName: 'I_103four', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
4:{AutoID: 0, FileName: 'I_104', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
5:{AutoID: 0, FileName: 'I_105GC', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
6:{AutoID: 0, FileName: 'I_201', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
7:{AutoID: 0, FileName: 'I_202MMEvolution', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}
8:{AutoID: 0, FileName: 'MMEvo', FilePath: 'C:\\temp\\batchprint\\engserv\\190200\\Installation', FileSize: 0, CreatedDate: '0001-01-01T00:00:00', …}

后端API接收方法 #

[EnableCors]
[HttpPost("TestCall/{projectNumber}")]
public IActionResult TestCall(string projectNumber, [FromBody] List<PDFFile> pdfs)
{
    _logger.LogInformation("TEST");

    return Ok();
}

可能的错误原因及解决方法 #

• 双重序列化导致数据格式错误：后端生成数据时，手动调用JsonSerializer.Serialize后再通过Ok()返回，会导致JSON被双重序列化（最终返回的是字符串形式的JSON）。前端拿到该数据后再JSON.stringify提交，实际发送的是字符串而非数组，后端无法解析为List<PDFFile>。解决方法：直接返回对象，去掉手动序列化，修改后端代码为return Ok(lstPDFs.OrderBy(x => x.FileName));。
• 日期格式不兼容：提交数据中的CreatedDate为0001-01-01T00:00:00，若后端PDFFile类中CreatedDate为DateTime类型，该值可能超出部分序列化配置的处理范围，导致模型绑定失败。解决方法：将CreatedDate改为可空类型DateTime?，或调整前端日期格式为.NET可正常解析的格式。
• 模型属性大小写不匹配：.NET默认的System.Text.Json序列化器区分大小写，若前端属性为大驼峰（如AutoID），而后端PDFFile类属性为小驼峰（如autoId），会导致属性无法绑定。解决方法：统一前后端属性命名规则，或在后端配置不区分大小写的序列化选项：

  builder.Services.AddControllers()
      .AddJsonOptions(options =>
      {
          options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
      });
  

• 请求内容验证：通过浏览器开发者工具的Network面板查看实际发送的Request Payload，确认是否为正确的数组格式，而非字符串或其他错误格式。同时检查是否存在未定义的属性或值类型不匹配的情况。

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