场景:在 Vue项目的man.js中封装了文件上传接口,配置transformRequest后导致其他请求接口出错。
原因: 配置transformRequest后请求数据是FormData格式,其他请求接口发送数据到后台无法解析。
解决方法:调用接口时,配置transformRequest相应的数据格式。
man.js中的接口配置
// 默认配置
import qs from 'qs';
import axios from 'axios'
axios.defaults.withCredentials = false;
axios.defaults.headers.common['token'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头
axios.defaults.transformRequest = [
function (data) {
return qs.stringify(data)
}
];
var base="";//你的项目地址 https://www.baidu.cn/mis
//post接口
export const POST = (url, params) => {
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';//配置请求头
//修改transformRequest 配置,返回数据格式为json
axios.defaults.transformRequest = [
function (data) {
return qs.stringify(data)
}
];
console.log(url);
return axios.post(`${
base}${
url}`, params).then(res => {
console.log(res);
if (res.status == 200)
return res.data;
else
//$Message.error("操作失败,服务端出现异常错误!")
Message.error("操作失败,服务端出现异常错误!")
})
}
// 文件上传接口
export const POSTFILE = (url, params) => {
// axios.defaults.headers.post['Content-Type'] = 'multipart/form-data;';//配置请求头
axios.defaults.transformRequest = [
function (data) {
console.log("file: "+data)
return data;
}
];
console.log(url);
return axios.post(`${
base}${
url}`, params).then(res => {
console.log(res);
if (res.status == 200)
return res.data;
else
//$Message.error("操作失败,服务端出现异常错误!")
Message.error("操作失败,服务端出现异常错误!")
})
}