场景描述
在 使用axios 发送HTTP请求时 传递了后端指定的请求参数 但是后端报错 描述信息为 Required String parameter 'username' is not present
分析问题
开始找原因
- 确定前端传递的参数 和后端 Mapping接收的参数名一致
- 前端传递的是JSON字符串
- 请求头的格式问题
具体步骤
main.js中
- 安装qs
npm install qs --save
-
main.js 中引入 var qs = require(‘qs’)
- 将请求头headers改为： ‘Content-Type’: ‘application/x-www-form-urlencoded’,
import axios from 'axios'
import qs from 'qs'
Vue.use(ElementUI);
axios.defaults.baseURL = 'http://localhost:8082';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// Vue.prototype.axios = axios.create({
// headers: {'content-type': 'application/x-www-form-urlencoded'}
// });
Vue.prototype.qs = qs;
Vue.prototype.axios = axios;
对应的组件中
this.axios.post('/login', this.qs.stringify(this.form)).then(res=>{
})
总结
axios 向后端提交数据时 传参方式时 request payload, 参数格式时 json, 并不是使用from传递参数,
post表单提交方式时 使用的Content-Type是application/x-www-form-urlencoded，而使用原生AJAX的post请求, 如果不指定请求头RequestHeader，默认使用的Content-Type是text/plain;charset=UTF-8
