vue axios传参报错的解决方法

今天有人问同一套后台系统为什么jquery可以正常使用，axios却报错呢，下面总结如下：

 

　　总的来说是jquery和axios传参类型不同，那为什么jquery和axios请求时传参类型不同？ 

 

　　1）jquery默认 form Data（如：url？a=1形式）；

　　因为jquery在执行post请求时，会默认设置Content-Type为application/x-www-form-urlencoded，发送的参数为form Data形式，所以服务器能够正确解析；

　　2）而使用原生ajax、axios请求时，如果不显示的设置Content-Type，axios默认发送数据时，数据格式是application/json，控制台参数里显示Request Payload（即 json格式），而并非我们常用的Form Data格式。

 

　　既然我们知道axios post方法默认使用application/json格式编码数据，那么解决方案就有两种：

　　一是后台改变接收参数的方法；

　　另一种则是将axios post方法的编码格式修改为application/x-www-form-urlencoded，这样就不需要后台做什么修改了。
--------------------- 

改变接收参数的解决办法：

　　1）URLSearchParams

var params = new URLSearchParams();
params.append('key1', 'value1');       //你要传给后台的参数值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');

　　bug: ie浏览器完全不兼容。

 

　　2）qs  qs.stringfy(para)即可；

　　　但是JSON.stringify和qs.stringify虽然都是序列化，效果却不同，如下：

　　　1)JSON.stringify：    "{"a":"1","b":2}"

　　　2)qs.stringify: 　　　 a=1&b=2

　　　　另，网上教程很多重新安装了 npm install qs --save,需要注意的是axios里已经包含qs，不用重新安装；

 

　　3）In node.js, you can use the querystring module as follows:

　　4）

 

 

改变header头的解决办法： headers和transformRequest配合使用；

const axiosInstance = axios.create({

  // axios实例配置

  timeout: 15000,

  method: 'post',

  headers: {

    'Content-Type': 'application/x-www-form-urlencoded'

  },

  transformRequest: [function(data) {

    // 请求前参数序列化

    return qs.stringify(data);

  }]

});

 

 

另附：axios参数里的params和data区别：

在使用axios时，要注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。 
params用于get请求，是添加到url的请求字符串中的，即是发送请求的查询参数对象，对象中的数据会被拼接成url?param1=value1&param2=value2。。
而data是添加到请求体（body）中的， 用于post请求。

 

 

参考：

https://github.com/axios/axios/blob/master/README.md#using-applicationx-www-form-urlencoded-format