axios post请求传参时后端接收productArray为null如何解决

问题根因 #

两个写法错误导致后端参数绑定失败：

1. 请求体结构不匹配：后端接口的Request入参类只有一个List<ProductDetails>类型的Products属性，必须传带products字段的对象才能绑定成功。你写jQuery请求时传的是{ products: productArray }，结构刚好匹配；但axios请求里直接把裸的productArray数组当请求体发送，后端找不到对应Products属性的入口，自然绑定为null。
2. 非核心问题：你数组里的productId、price目前传的是字符串值，虽然ASP.NET Core默认会自动做字符串到int的类型转换，不会直接导致绑定失败，但传对应数字类型更稳妥。

修复方案 #

把axios请求的请求体结构调整为和jQuery一致即可，修正后的代码：

async function GetAllProducts() {
    let productArray = [];
    // 字段值直接传数字类型，和后端int类型对应
    productArray.push({ productId: 1, price: 5 });
    // 外层包products字段，和后端Request类结构对齐
    const response = await axios.post(`/api/${productId}/getProducts`, {
        products: productArray
    })
}

如果调整后还是出现绑定问题，可以给后端Action的request参数显式加上[FromBody]特性，指定从请求体读取JSON参数：

[HttpPost]
public async Task<IActionResult> GetProducts(int productId, [FromBody] Request request)

补充：jQuery的$.post默认用application/x-www-form-urlencoded编码发请求，axios.post默认用application/json格式发请求，ASP.NET Core原生支持两种格式的模型绑定，只要请求体结构和入参类属性对应，不需要额外修改axios的请求头配置。

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