axios使用post请求服务端不能获取参数的解决方法

项目中使用到axios作为ajax请求插件，用到post请求是常见的，诸如以下场景的一个普通的post请求：

export function listManage(params) {
    return request({
      url: "http://xxx/QueryOrder/QueryOrderList",
      method: 'post',
      params: params
    })
  }

    1
    2
    3
    4
    5
    6
    7

但是后台说没有接收到传过去的参数，但是可以收到请求，WTF？前端检查了好几遍，浏览器的请求信息是 OK 的，请求封装也是ok的，参数都是有的，我说是服务端的问题，服务端说是我的问题，这特么就尴尬了。

 Content-Type：application/json;charset=UTF-8

    1

其实是axios在内部自动帮我们转换json格式数据, 也就是说，我们的 Content-Type 变成了 application/json;charset=utf-8
然后，因为我们的参数是 JSON 对象，axios 帮我们做了一个 stringify 的处理。 而axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。
那么，这就与我们服务端要求的 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 不符合。

解决方法：
在网上有看到给axios 头添加post请求方法的 Content-Type：

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 

    1

试了一下不行，翻了半天文档又查了一下需要序列化, qs序列化请求参数即可，当然你可以在封装请求方法的api中每次请求时作处理，我这里使用了封装axios时直接在request请求拦截器中做了处理：

http.js:

import Qs from 'qs'
axios.interceptors.request.use( (config) => {
    if (config.method=="post"){
        config.data = qs.stringify(config.data);
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    }
    return config;
},  (error) => {
    return Promise.reject(error);
});

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

okay………又可以愉快的使用post了，然后告诉服务端的同学我把他们的活干了~
--------------------- 
作者：kirinlau 
来源：CSDN 
原文：https://blog.csdn.net/kirinlau/article/details/82669013 
版权声明：本文为博主原创文章，转载请附上博文链接！