axios中post请求传参问题

最新推荐文章于 2025-03-09 14:46:09 发布

EdwardWH

最新推荐文章于 2025-03-09 14:46:09 发布

阅读量6k

点赞数

文章标签： java vue js json axios

本文链接：https://blog.youkuaiyun.com/EdwardWH/article/details/107676773

版权

在axios中遇到POST请求参数传递失败的问题，原因是axios默认以JSON格式发送，而SpringMvc期望键值对形式。解决方案包括使用URLSearchParams、qs库或FormData对象。对于get和post请求，axios的params用于get请求的URL拼接，data用于post请求的请求体。项目实践中，推荐使用FormData对象，避免修改content-Type。

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

1. post请求传参失败

问题原因：
axios发送post请求的content-Type的值是application/json,参数在请求体中以json对象的形式传递，而springMvc框架接受post请求的参数的类型必须要求是键值对的形式
解决办法：
1. axios文档中针对该问题提出了2种解决方法：

使用浏览器提供的URLSearchParams的Api:

请求时使用 application/x-www-form-urlencoded axios 会默认序列化 JavaScript 对象为 JSON。如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置。

浏览器

在浏览器环境，你可以使用 URLSearchParams API：

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

URLSearchParams 不是所有的浏览器均支持。

使用qs库来转换参数的格式，并设置content-Type的值，–不适用与当前项目，需要node环境

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

// Or in another way (ES6),

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

Node.js 环境
在 node.js里, 可以使用 querystring 模块:

const querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));

当然，同浏览器一样，你还可以使用 qs 库。

推荐使用浏览器提供的FormData对象完成

1 思路：将axios中post请求传递的参数由json格式换成formData的键值对格式即可，且设置content-Type的值

2 代码实现：

利用浏览器提供的FormData对象,无需去修改content-Type的值

var fromData = new FormData();
fromData.append('name','val');
fromData.append('name','val');

3.项目中代码修改

  ~~~java
  var formData = new FormData();
  formData.append('name',this.roleName);
  formData.append('note',this.note);
  formData.append('menuIds',menuIds);
  
  axios({
      method: 'post',
      url: url,
      data: formData
  })
  ~~~

2. axios请求中get和post请求传参属性不同问题：

get请求传参的属性：params
post请求传参的属性：data
get和post请求属性不同的原因：
1. get请求的参数最终是要拼接在url之后的，以？xx=xx的形式;post请求的参数最终是要保存在请求体中的.
2. params属性对参数的处理方式是将参数以key-val的形式拼接成字符串，最后拼接在url的后面；而data属性对参数的处理方式是将参数以key-val的形式并默认序列化为json对象，保存到请求体中。