NextJS中await fetch POST请求返回404,仅await post可用原因咨询
问题原因及解决方案
你遇到的404问题核心是两种请求发送的数据格式不匹配Spring控制器的接收规则,具体分析和解决方法如下:
核心原因
你使用的await post方法(大概率是封装好的请求库,比如Axios或项目自定义封装)默认发送的是表单编码格式(application/x-www-form-urlencoded或multipart/form-data),而你的Spring控制器(应为@PostMapping注解的接口)大概率用@RequestParam接收参数,这种方式仅支持表单格式的请求。
而你用fetch编写的代码是发送JSON格式请求(Content-Type: application/json),但控制器未配置接收JSON格式的参数(比如未添加@RequestBody、未指定consumes属性),导致Spring找不到对应的接口处理逻辑,返回404。
解决方案
方案1:修改fetch请求,发送表单格式数据
将payload转换成表单格式发送,和post方法的行为对齐:
const payload = { param1: param1, param2: param2 }; // 方式1:用FormData(支持复杂数据类型) const formData = new FormData(); Object.entries(payload).forEach(([key, value]) => formData.append(key, value)); const response = await fetch("/app/action", { method: 'POST', body: formData }); // 方式2:用URLSearchParams(适合简单键值对) const params = new URLSearchParams(payload); const response = await fetch("/app/action", { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: params });
方案2:修改Spring控制器,支持JSON格式请求
如果希望控制器接收JSON格式,需调整接口的参数接收方式:
import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RestController; @RestController public class YourController { // 指定接收JSON格式,并用@RequestBody绑定参数 @PostMapping(value = "/app/action", consumes = MediaType.APPLICATION_JSON_VALUE) public ResponseEntity<?> handleRequest(@RequestBody YourPayloadDto payload) { // 业务处理逻辑 return ResponseEntity.ok("success"); } // 与前端payload字段匹配的DTO类 static class YourPayloadDto { private String param1; private String param2; // 需添加getter/setter,或使用Lombok的@Data注解简化 public String getParam1() { return param1; } public void setParam1(String param1) { this.param1 = param1; } public String getParam2() { return param2; } public void setParam2(String param2) { this.param2 = param2; } } }
内容的提问来源于stack exchange,提问作者gene b.
相关产品推荐
相关产品推荐

