Material UI时间选择器提交时间报415错误及格式适配问题咨询

错误原因排查 #

首先可以排除两个错误方向：

• 不是CORS配置问题：CORS错误会被浏览器直接拦截，控制台会明确报跨域相关错误，不会返回415 Unsupported Media Type状态码
• 大概率不是Axios请求头问题：415错误的本质是服务端无法解析请求体的数据格式，和你传的时间格式不匹配服务端反序列化规则直接相关

你已经将后端字段改为TimeSpan类型仍然报错，是因为.NET 5 默认的System.Text.Json序列化器不支持直接将HH:MM格式的字符串反序列化为TimeSpan类型。

方案1：后端适配（推荐） #

自定义Json转换器来支持HH:MM格式到TimeSpan的转换，不需要修改前端逻辑：

第一步：编写自定义转换器 #

using System;
using System.Text.Json;
using System.Text.Json.Serialization;

public class TimeSpanJsonConverter : JsonConverter<TimeSpan>
{
    public override TimeSpan Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options)
    {
        var value = reader.GetString();
        if (TimeSpan.TryParse(value, out var timeSpan))
        {
            return timeSpan;
        }
        // 兼容严格HH:MM格式
        if (TimeSpan.TryParseExact(value, "hh\\:mm", null, out var exactTimeSpan))
        {
            return exactTimeSpan;
        }
        throw new JsonException($"无法将{value}转换为TimeSpan格式");
    }

    public override void Write(Utf8JsonWriter writer, TimeSpan value, JsonSerializerOptions options)
    {
        writer.WriteStringValue(value.ToString(@"hh\:mm"));
    }
}

第二步：注册转换器 #

在Startup.cs的ConfigureServices方法中添加配置：

services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.Converters.Add(new TimeSpanJsonConverter());
    });

配置完成后前端直接传HH:MM格式的时间即可正常解析。

方案2：前端调整 #

如果你不想修改后端，也可以调整提交逻辑避免修改原表单绑定的state值：
你之前直接修改state里的log对象会导致表单绑定的时间值变成带日期的格式，不符合时间选择器的要求，只要提交时新生成一个提交用的对象即可：

const handleSubmit = (e: SyntheticEvent) => {
    e.preventDefault();
    // 拷贝原数据，不修改绑定表单的state
    const submitLog = {...log};
    submitLog.startTime = `${log.date}T${log.startTime}:00`;
    submitLog.endTime = `${log.date}T${log.endTime}:00`;
    createLog(submitLog);
}

调整后既不影响时间选择器的正常使用，也能给后端传符合DateTime格式要求的时间字符串。

补充说明 #

如果修改后仍然报415错误，可检查Axios的请求头是否设置了Content-Type: application/json，大部分Axios封装会默认加这个配置，如果没加手动给post请求加上即可。

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