You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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.

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.27 23:53:22