Axios POST请求传值到.NET控制器时参数code始终为null如何解决

接口拿不到code参数值是两个传参不匹配的问题叠加导致的：

• Axios POST请求直接传入字符串变量作为请求体时，默认使用application/json格式序列化，最终发出去的请求体是纯字符串值，没有code的字段名映射；
• .NET 接口的简单类型参数（比如你写的string code）默认只会从URL查询参数、表单提交的字段里匹配同名值，不会主动解析JSON请求体里的内容，自然拿不到传入的数据，始终返回null。

另外你现有代码有明显bug：当code为null时直接调用code.ToString()会触发空引用异常，必须加空值校验。

两种方案选一种就行，推荐第一种，符合常规接口开发规范。

方案1：前后端对齐JSON传参逻辑（推荐） #

后端调整 #

给参数加[FromBody]特性明确指定从JSON请求体绑定数据，建议用请求类接收字段，同时加上空值校验，优化大小写比较逻辑：

// 定义请求传输对象，和前端传的JSON字段对应
public class DiscountCheckReq
{
    public string Code { get; set; }
}

[HttpPost]
[Route("check-code")]
public ActionResult CheckDiscountCode([FromBody] DiscountCheckReq req) 
{
    const string ValidDiscountedCode = "MYCODE";
    // 空值直接返回校验失败，避免空引用
    if (string.IsNullOrWhiteSpace(req?.Code))
    {
        return Json(false);
    }
    // 忽略大小写比较，不用手动转大写
    return Json(string.Equals(ValidDiscountedCode, req.Code, StringComparison.OrdinalIgnoreCase));
}

前端调整 #

把传入的参数包装成带code属性的对象，Axios会自动序列化为标准JSON结构：

const response = await axios.post(
  process.env.REACT_APP_API_URL + '/check-code',
  { code: discountCode }
)

方案2：不改后端，调整前端传参格式 #

如果不想改动后端代码，把参数放到后端默认能识别的位置即可，两种写法都可以：

• 拼接到URL查询参数中

  const response = await axios.post(
    `${process.env.REACT_APP_API_URL}/check-code?code=${encodeURIComponent(discountCode)}`
  )
  

• 用表单格式传参

  const formParams = new URLSearchParams();
  formParams.append('code', discountCode);
  const response = await axios.post(
    process.env.REACT_APP_API_URL + '/check-code',
    formParams
  )
  

注意：就算用这个方案，也建议给后端接口加上入参空值校验，避免空引用报错。

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