项目中使用到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了,然后告诉服务端的同学我把他们的活干了~