Vue中axios踩坑POST传参_vue 使用axios传参时,参数中有一个值是"",请求后我的参数会被删除-CSDN博客

本文链接：https://blog.csdn.net/linglingzi001/article/details/108349261

在Vue项目中，使用axios进行POST请求时遇到参数传递问题。axios默认以Request Payload格式发送数据，而非常见的Form Data，导致后台无法接收到参数。解决方案包括使用qs模块将参数转化为键值对，或者使用URLSearchParams，但后者存在兼容性问题。通过qs模块的qs.stringify()方法可以简单有效地解决这个问题。

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

vue axios解决post传参数问题

vue框架推荐使用axios来发送ajax请求,
最近写项目时使用了post方法，结果发现后台（node.js）完全拿不到前台传来的参数。后来进过一番探索，终于发现问题所在。

// 官方实例：
axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

这样传递的参数不存在，但在请求中看的到参数，只是参数的格式是Request Payload
百度后：
axios默认发送数据时，数据格式是Request Payload，并非我们常用的Form Data格式，所以参数必须要以键值对形式传递，不能以json形式传参

解决办法

1.qs模块是axios中自带的不需要下载，直接导入
解决问题的核心就是把参数转换成标准的键值对

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));

如果参数里面要传数组,查看官方文档发现，只需要在qs的方法中设置它的indices为false即可

qs.stringify({ a: ['b', 'c', 'd'] }, { indices: false });

2.使用URLSearchParams传递参数

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

后台可以获取到相应的键值对，但是使用这样的方法有两点坏处，第一个是前端请求每一个字段都append会很麻烦，第二个就是这个对象它不兼容IE和Edge甚至在360浏览器都会挂掉，我曾经尝试过IE11版本都不行，提示这个对象缺失。需要在后端做处理

req = json.loads(request.body)
req_userid = req['userid']
req_password = req['password']

最终使用qs简单方便
更多qs功能参考：https://www.npmjs.com/package/qs