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

￡神魔★判官ぃ 2022-02-09 13:07 1027阅读 0赞

# 场景描述 #

在 使用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