Vue传参出现 Required String parameter 'username' is not present

场景描述

在 使用axios 发送HTTP请求时 传递了后端指定的请求参数 但是后端报错 描述信息为 Required String parameter 'username' is not present

分析问题

开始找原因

1. 确定前端传递的参数 和后端 Mapping接收的参数名一致
2. 前端传递的是JSON字符串
3. 请求头的格式问题

具体步骤

main.js中

1. 安装qs npm install qs --save
2. main.js 中引入 var qs = require(‘qs’)
3. 将请求头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