Axios PUT请求无法调用后端接口问题求助

核心问题定位 #

仅传递id能正常进入后端方法，说明路由配置、HTTP方法（PUT）、授权逻辑均无问题，故障根源在[FromQuery] Request request的模型绑定环节：

• 400状态码对应Bad Request，大概率是Request类的字段验证失败（比如必填字段传空值、类型不匹配）
• 最终URL中的空参数（Var3、Var5、Var6）可能触发了后端的必填校验；同时body中包含的Var2值与路由id重复，可能引发模型绑定歧义

可行调整方案（适配有限修改空间） #

前端侧调整（优先尝试） #

1. 过滤body中的空值参数
   后端可能对Request类的部分字段有必填要求，前端传递空字符串会触发验证失败。修改Axios请求，自动移除空值参数：

   // 过滤空值、null、undefined的参数
   const filteredParams = Object.fromEntries(
     Object.entries(body).filter(([_, val]) => val !== '' && val != null)
   );
   
   const response = await axiosConfig.put<IReserved>(
     `my_url/${id}`,
     null,
     {
       params: filteredParams,
     }
   );
   

2. 移除body中与路由id重复的字段
   观察到URL中Var2的值与路由id一致，后端已从路由获取id，若Request类中Var2为必填字段，会导致绑定冲突。尝试从body中剔除该字段：

   const { Var2, ...cleanBody } = body;
   const response = await axiosConfig.put<IReserved>(
     `my_url/${id}`,
     null,
     {
       params: cleanBody,
     }
   );
   

后端侧调整（若允许小幅修改） #

1. 修正Request类的验证规则
   检查Request类定义，移除非必填字段的[Required]标记，或允许空字符串：

   public class Request
   {
       public int Var1 { get; set; }
       // 若Var2无需必填，移除[Required]
       // [Required]
       public int Var2 { get; set; }
       // 允许空字符串的非必填字段
       [Required(AllowEmptyStrings = true)]
       public string Var3 { get; set; }
       // 其他字段同理调整
   }
   

2. 显式指定路由参数绑定源
   给id参数添加[FromRoute]标记，明确告诉后端从路由路径获取id，避免绑定歧义：

   [HttpPut("{id}"), Authorize]
   public async Task<ActionResult<BasicInfoResponse>> UpdateItem([FromRoute] int id, [FromQuery] Request request)
   

验证步骤 #

1. 先尝试前端过滤空参数，测试是否能进入后端方法
2. 若失败，再移除body中的Var2字段重试
3. 前端调整无效时，检查后端Request类的验证规则并修正

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