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

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

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

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

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

其实是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'; 

试了一下不行,翻了半天文档又查了一下需要序列化, 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);
});

okay………又可以愉快的使用post了,然后告诉服务端的同学我把他们的活干了~

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kirinlau

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值