编程随笔-Vue | 03.SpringBoot项目无法获得POST请求的参数

0.总述

主要问题：SpringBoot后端无法接收POST请求的参数

解决方案：前端更改参数传输格式为form-data

1.问题描述

后端接口是这样的，接收两个参数：

• HttpServletRequest request - 用户发送过来的请求(用来校验身份)
• String allDataStr - 用户在表单填写的数据

用postman进行测试，服务器能够收到参数并正常响应

前端用axios发送请求

服务器报NPE，经分析，原因是"allDataStr"的值为""

常见的解决方案是：定义一个Pojo作为形参，并加上@RequestBody，就像这样：

//用一个Pojo来接收参数
public class Pojo1 {
    private String allDataStr;
}

@PostMapping("/listNotSubmittedByStr")
public void listNotSubmittedByStr(@RequestBody Pojo1 pojo){
    //...code here
}

但这么做有非常明显的弊端：

• 每个接口都需要一个Pojo，Pojo数量特别多
• 每个接口都要写一次@RequestBody
• 接口需要的参数由于Pojo的封装而变得不再一目了然

因此本文我们探索另一个更优解

2.问题分析

通过postman发送请求，后端能接收到参数

通过axios默认方式发送请求，则无法收到

针对上述发现，我查阅了许多资料，最终总结得出：

• 通过postman发送请求时，数据以form-data形式传输
• 通过axios默认方式发送请求，数据以Payload形式传输

通过form-data形式传输数据时，后端可以正常接收到参数

而通过Payload形式传输时，后端必须用对象去接收参数，并加上@RequestBody。

综上，解决问题的思路是：将数据以form-data形式传输

3.问题解决 - 将数据以form-data形式传输

axios发送formdata请求

vue axios form-data格式 传输数据和文件

综合上面两篇文章的内容，最终的解决方案分为以下两步：

1. 参数用FormData对象封装起来
2. 修改请求头的"content-type"

//所有的参数用formData封装起来
let formData = new FormData();
formData.append("yourKey", "youValue");

//axios发送请求
axios({
		url: "url",
		data: formData,
		headers:{
				"content-type": "application/x-www-form-urlencoded",
    },
    method: "POST",
}).then(
		function(response){
    		console.log(response)
    }
)