axios使用x-www-form-urlencoded方式传递参数无法接收的问题

之前的项目中,一直使用的jQuery来请求ajax数据。直到使用Vue框架,才开始使用axios这个库,作为一个官方推荐的库,觉得它应该有过人之处。 可是在刚开始使用中就遇到了一个问题:axios提交的数据,后台接收不到。 之前使用jQuery时,并没有问题,也从没有注意过Request Headers里的内容,这次遇到这个问题时,才开始注意到Request Headers里面的内容。 这个问题在于,jQuery请求数据时,传入JSON对象类型的参数,jQuery会自动转成querystring形式的,但axios并不会转成querystring类型,而是序列化成json字符串进行传递,所以axios请求时使用默认方式传递参数的话,服务端不做处理的话取不到数据。

请求头

JSON对象转为querystring有三种方法:

  1. 浏览器中
1
2
3
4
var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);
  1. 浏览器中
1
2
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 }));
  1. nodejs中
1
2
var querystring = require('querystring');
axios.post('http://something.com/', querystring.stringify({ foo: 'bar' }));