Axios POST无控制台报错但无法命中接口对应处理方法

• Axios 发起的 POST 请求可到达 API 控制器，但无法命中对应的处理方法，控制台无任何报错输出
• 同服务下 GET 请求运行正常

前端请求代码 #

const register =async(companyDetails)=>{
// const ApiURL = await environmentConfig.getBaseURL();
const ApiURL = "https://localhost:44313/api/v1.0";
try{
 const result = await axios(`${ApiURL}/market/company/register`,{
        method:'POST',
        headers :{
            'Accept':'application/json',
            'Content-Type':'application/json'
         },
        body :JSON.stringify(companyDetails),
         
    });
    return result.json();
}
catch(err){
    return err;
}
}

后端接口代码 #

[Route("api/v1.0/market")]
    [ApiController]
    public class StockController 
    {
        private readonly MongodbService _mongodbService;
        public StockController(MongodbService mongodbService)
        {
            _mongodbService = mongodbService;
        }
    

        [HttpPost]
        [Route("company/register")]
        public async Task<CompanyDetails> Register([FromBody] CompanyDetails companyDetails)
        {
             await _mongodbService.Register(companyDetails);
            return companyDetails;
        }
   }

前端 Axios 用法存在两个错误，导致请求体未被正确传递：

• Axios 中设置请求体的配置字段为data，而非body。body是原生 fetch API 的配置项，Axios 无法识别该字段，最终发出的 POST 请求没有携带有效请求体，后端[FromBody]参数绑定失败，自然无法命中处理方法
• Axios 内部已经封装了响应数据的解析逻辑，不需要像 fetch 一样手动调用.json()方法，接口返回的数据会直接挂载在响应对象的data属性上。原代码中调用result.json()反而会抛出类型错误，只是被catch块捕获后没有打印，才表现为控制台无报错。

调整前端 Axios 请求写法即可，修复后的代码如下：

const register = async(companyDetails)=>{
    // const ApiURL = await environmentConfig.getBaseURL();
    const ApiURL = "https://localhost:44313/api/v1.0";
    try{
        const result = await axios(`${ApiURL}/market/company/register`,{
            method:'POST',
            // 传入JS对象时，Axios会自动设置Content-Type为application/json并完成序列化，无需手动处理
            data: companyDetails
        });
        return result.data;
    }
    catch(err){
        // 建议此处打印错误日志方便排查问题
        console.error(err);
        return err;
    }
}

补充：如果使用axios.post()简写方法，代码可以更简洁：

const result = await axios.post(`${ApiURL}/market/company/register`, companyDetails);

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