axios中post请求后台接收不到参数的解释

最新推荐文章于 2025-07-05 15:39:49 发布

李喵喵爱豆豆

最新推荐文章于 2025-07-05 15:39:49 发布

阅读量2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript学习文章标签： postman json 前端

本文链接：https://blog.youkuaiyun.com/qq_41040989/article/details/129064960

javascript学习专栏收录该内容

10 篇文章

订阅专栏

在开发中遇到Axios向后台发送Post请求时，参数无法被后台解析。问题在于前端传递的数据格式与后台解析方式不匹配。通过使用URLSearchParams处理参数，使后台能正确接收。同时提到了Node.js后台的Express中间件，如`express.urlencoded`和`express.json`，用于解析不同格式的请求体。了解请求数据格式与后台解析的对应关系是解决问题的关键。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做项目，用axios向后台发送post请求，具体的写法参照官方文档的写法：

// 发送 POST 请求
axios({
  method: 'post',
  url: ‘http://127.0.0.1:3000/login'
  data: {
    username: admin,
    password: admin
  }
}).then((value)=>{
	console.log(value)
})
.catch(reason=>{console.log(reason)});

我发现，其实后台是接收到了post请求，但是一直无法解析我传过去的参数，而且我尝试用postman测试了一下接口，用postman时可以正确传参的，同时，我在后台打印了一下传过去的参数，发现username和password都是undefined，说明是我传参的方式出了问题。

找了很久都没有找到原因，然后我查阅了下网上资料，把传参改成了以下格式：

        let param = new URLSearchParams()
        param.append('username', 'admin')
        param.append('password','admin')
        axios({
            method: 'post',
            url: "http://127.0.0.1:3000/login",
            data: param
        })
            .then((result) => { console.log(result) })
            .catch((reason) => { console.log(reason) })
    };

这个时候，发现后台已经可以接收到参数了。

查阅了下文档，发现：

axios的get请求都是把参数放在params属性下，在post请求下有两种方法，一种是放在params属性中，适合传参较少且数据较简单的情况，另外一种是放在data属性中，如果传参中含有引号、等号、拼接的json串或传参的数据量较大时候使用；
源码是这样的：

//如果是带&&的参数的格式转成String
if(utils.isURLSearchParams(data){ 
  setContentTypeIfUnset(headers, 'application/x-www-form-urlencoded'); 
  return data.tostring(); 
} 
//如果是object对象转成json格式
if(utils.isObject(data){ 
  setContentTypeIfUnset(headers, 'application/json;charset=utf-8'); 
  return JSON.stringfy(data); 
}

我想起之前后台的服务器的配置，node后台一般会配置中间件解析数据，包含两种方式：

app.use(express.urlencoded({extended: true})) // 请求体参数是: name=tom&pwd=123

app.use(express.json()) // 请求体参数是json结构: {name: tom, pwd: 123}

看到这里就豁然开朗了，post请求的两种数据格式要和后台的解析方式相对应，如果后台固定了，就可以通过前端js代码对数据格式进行转换

这个bug当时找了蛮久，关键是要知道出错的根本原因，才知道后面遇到类似的问题如果解决。