解決axios發(fā)送post請求,springMVC接收不到數據問題的處理

更新時間：2026年05月20日 10:38:08 作者：svygh123

文章主要討論了Vue組件無法正確接收和處理Axios請求的問題,并詳細描述了SpringMVC中使用@PathVariable、@RequestBody、@RequestParam的不同場景及其對應的前端Axios寫法

vue組件中無法正確接收并處理axios請求

這個問題已經困擾我好久了，在電腦面前坐了兩天只能確定前端應該是正確的發(fā)送了請求，但發(fā)送請求后無法正確接受后端返回的數據。

問題：vue組件無法接受后端數據

錯誤代碼如下：

axios.post("/simple_query",{
},this.simple_query_input).then(res=>{    
    console.log(res);
}).catch(err=>{
    console.log(err);
})

@RequestMapping(value = "/simple_query",method = RequestMethod.POST)
public cheName handleSimpleQuery(@RequestParam("simple_query_input") String simpleQueryInput) throws Exception {

}

網上找到也有類似未解決的：

Spring MVC的Controller里面使用了@RequestParam注解來接收參數，但是只在GET請求的時候才能正常訪問，在使用POST請求的時候會產生找不到參數的異常。原本好好的POST請求開始報400錯誤，找不到REST服務，一般情況下報這種錯誤多是由于POST請求時傳遞的參數不一致，但是這次不存在這種問題，百思不得其解啊。。。

還有這個：axios發(fā)送post請求，springMVC接收不到數據問題

@RequestMapping(method = RequestMethod.POST, value = "/test")
@ResponseBody
public ResponseEntity testDelete(@RequestParam("id") Integer id)
        throws Exception {
    return ResponseEntity.ok();
}

代碼中是規(guī)定了請求方式POST，使用@RequestParam接收id參數。

然后前臺請求參數也對,是這個形式的{id:111}，看起來沒錯啊，參數名完全一樣，但是后臺報錯Required String parameter 'id' is not present,說id參數必須傳過來。

分析問題

雖然前端傳遞的參數形式為{id: 111}，看起來id的參數名確實是一樣的，但是這個參數是作為請求的body而非作為普通參數或query parameter傳遞的。因此無法直接使用@RequestParam注釋接收它。

今天就倆解決一下吧：

SpringMVC 中 @PathVariable、@RequestBody、@RequestParam的使用場景以及對應的前端axios寫法是什么呢？

一、@PathVariable

axios代碼：

axios.post('http://localhost:8080/endpoint3/' + this.firstName + '/' + this.lastName)
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

SpringMvc的controller代碼：

@PostMapping("/endpoint3/{firstName}/{lastName}")
@ResponseBody
public String endpoint2(@PathVariable("firstName") String firstName,  
         @PathVariable("lastName") String lastName) {
	// 處理請求邏輯
	return "Hello, " + firstName + " " + lastName;
}

二、@RequestBody

axios代碼：

axios.post('http://localhost:8080/endpoint2', {firstName: this.firstName, lastName: this.lastName})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

SpringMvc的controller代碼：

@PostMapping("/endpoint2")
@ResponseBody
public String endpoint2(@RequestBody Map<String, Object> requestBody) {
	String firstName = Objects.toString(requestBody.get("firstName"));
	String lastName = Objects.toString(requestBody.get("lastName"));
	// 處理請求邏輯
	return "Hello, " + firstName + " " + lastName;
}

三、@RequestParam

axios代碼：

const formData = new FormData();
formData.append('firstName', this.firstName);
formData.append('lastName', this.lastName);
axios.post('http://localhost:8080/endpoint1', formData)
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

SpringMvc的controller代碼：

@PostMapping("/endpoint1")
public String handlePostRequest(@RequestParam("firstName") String firstName,
		@RequestParam("lastName") String lastName) {
	// 處理請求邏輯
	return "Hello, " + firstName + " " + lastName;
}

前臺完整代碼：

<!DOCTYPE html>
<html>
<head>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.0/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.8/axios.min.js"></script>
</head>
<body>
	<div id="app">
		
	</div>
	<script>
			new Vue({
			  el: '#app',
			  data () {
				return {
				  firstName: "John",
				  lastName: "Doe"
				}
			  },
			  mounted () {
				  const formData = new FormData();
				  formData.append('firstName', this.firstName);
				  formData.append('lastName', this.lastName);
				  axios.post('http://localhost:8080/endpoint1', formData)
					.then(response => {
					  console.log(response.data);
					})
					.catch(error => {
					  console.error(error);
					});	

					axios.post('http://localhost:8080/endpoint2', {firstName: this.firstName, lastName: this.lastName})
					.then(response => {
					  console.log(response.data);
					})
					.catch(error => {
					  console.error(error);
					});	

					axios.post('http://localhost:8080/endpoint3/' + this.firstName + '/' + this.lastName)
					.then(response => {
					  console.log(response.data);
					})
					.catch(error => {
					  console.error(error);
					});	

			  }
			})
	</script>

</body>

后臺核心代碼：

@RestController
@CrossOrigin
public class MySpringMvcController {
	
	@PostMapping("/endpoint1")
	public String handlePostRequest(@RequestParam("firstName") String firstName,
			@RequestParam("lastName") String lastName) {
		// 處理請求邏輯
		return "Hello, " + firstName + " " + lastName;
	}
	
	@PostMapping("/endpoint2")
	@ResponseBody
	public String endpoint2(@RequestBody Map<String, Object> requestBody) {
		String firstName = Objects.toString(requestBody.get("firstName"));
		String lastName = Objects.toString(requestBody.get("lastName"));
		// 處理請求邏輯
		return "Hello, " + firstName + " " + lastName;
	}
	
	@PostMapping("/endpoint3/{firstName}/{lastName}")
	@ResponseBody
	public String endpoint2(@PathVariable("firstName") String firstName,  
	         @PathVariable("lastName") String lastName) {
		// 處理請求邏輯
		return "Hello, " + firstName + " " + lastName;
	}

}