axios headers设置 application/x-www-form-urlencoded 序列化‘qs‘
在vue中请求数据通常是content-type:application/json;charset=UTF-8格式,但突然后台要求用'Content-type':'application/x-www-form-urlencoded'格式,我换了格式却就是查不到数据,后来才发现post:enctype 默认"application/x-www-form-urlencoded"对表单数据进行编码,数据
·
在vue中请求数据通常是
content-type:application/json;charset=UTF-8格式,但突然后台要求用 'Content-type': 'application/x-www-form-urlencoded' 格式,我换了格式却就是查不到数据,后来才发现
post:enctype 默认
"application/x-www-form-urlencoded"
对表单数据进行编码,数据以键值对在http请求体重发送给服务器;如果enctype 属性为
"multipart/form-data"
,则以消息的形式发送给服务器。
但是我们在vue里面直接提交的是一个对象 , 根本不是这个玩意
所以我们要借助node 里面的 qs
qs和JSON 差不多
const Qs = require('qs');
然后把这个东西传给后端就好了 Qs.stringify(obj) 记得改axios 的请求格式
headers: {
'content-type': 'application/x-www-form-urlencoded
'
}
.vue请求数据
import { queryProvinceData } from '@/api/data-report'
// 请求机构子公司
queryProvinceData(comLevel) {
this.comLevelLoading = true
queryProvinceData({ comLevel }).then(res => {
console.log('comLevel', comLevel)
this.comLevelLoading = false
console.log('请求子公司', res)
}).catch(e => {
this.comLevelLoading = false
this.$message.error(e.toString())
})
},
js.封装过的axios请求
import qs from 'qs'
export function queryProvinceData(data) {
return request({
url: '/mock/XuQuanRu/province/query',
method: 'post',
data: qs.stringify(data),
headers: { 'Content-type': 'application/x-www-form-urlencoded' }
})
}
qs文件
'use strict';
var stringify = require('./stringify');
var parse = require('./parse');
var formats = require('./formats');
module.exports = {
formats: formats,
parse: parse,
stringify: stringify
};
更多推荐
已为社区贡献39条内容
所有评论(0)