Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。
axios 请求配置中,transformRequest
配置允许在向服务器发送前,修改请求数据。
// `transformRequest` 允许在向服务器发送前,修改请求数据 // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法 // 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream transformRequest: [function (data) { // 对 data 进行任意转换处理 return data; }],
可以使用该配置修改请求参数。
参考资料:https://www.kancloud.cn/yunye/axios/234845
如下是axios的两种方法
方法一:
this.axios({ url: '/user', method: 'post', data: { firstName: 'Fred', lastName: 'Flintstone' }, transformRequest: [function (data) { // Do whatever you want to transform the data let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
当然可以在main.js
中进行配置
// main.js import Axios from 'axios' import VueAxios from 'vue-axios' const MyAxios = Axios.create({ transformRequest: [function (data) { // 将数据转换为表单数据 let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) Vue.use(VueAxios, MyAxios)
参考链接:https://segmentfault.com/q/1010000008462977
方法二:使用qs模块/querystring模块
//import qs from 'querystring' import qs from 'qs' //export default{ .. } this.axios({ url: '/user', method: 'post', data: { firstName: 'Fred', lastName: 'Flintstone' }, transformRequest: [function (data) { data = qs.stringify(data); return data; }], headers:{'Content-Type':'application/x-www-form-urlencoded'} }) })
此方法操作前,需要先安装qs
npm install --save qs
参考链接:https://blog.csdn.net/shooke/article/details/76038967