向Spring后端发送Axios POST请求时出现400错误：参数接收异常

问题根源 #

你的前端Axios通过POST请求发送的是JSON格式的请求体，但后端使用@RequestParam注解——这个注解仅用于获取URL查询参数或表单提交的键值对参数，无法解析请求体中的JSON数据，因此后端会提示未收到mangaId参数。

解决方案一：后端改用@RequestBody接收JSON参数 #

这种方式更符合当前前端的传参逻辑，推荐使用。

步骤1：创建请求DTO类（规范写法） #

// 可单独创建类，或作为Controller内部类
public class MangaSaveRequest {
    private String mangaId;

    // 必须保留无参构造器，Spring需要通过它实例化对象
    public MangaSaveRequest() {}

    // Getter和Setter方法
    public String getMangaId() {
        return mangaId;
    }

    public void setMangaId(String mangaId) {
        this.mangaId = mangaId;
    }
}

步骤2：修改Controller接口 #

@PostMapping("/saveManga")
public ResponseEntity<String> saveManga(@RequestBody MangaSaveRequest request, HttpSession session) {
    try {
        Long userId = (Long) session.getAttribute("userId");
        if (userId == null) {
            return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("User not logged in.");
        }

        String mangaId = request.getMangaId();
        System.out.println("Manga ID: " + mangaId);
        System.out.println("User ID from session: " + userId);

        usermangainfo.insertUserMangas(userId, mangaId);

        return ResponseEntity.ok("Manga saved successfully.");
    } catch (Exception e) {
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Error saving manga: " + e.getMessage());
    }
}

如果不想额外创建DTO类，也可以直接用Map临时接收：

@PostMapping("/saveManga")
public ResponseEntity<String> saveManga(@RequestBody Map<String, String> requestBody, HttpSession session) {
    String mangaId = requestBody.get("mangaId");
    // 后续逻辑同上
}

解决方案二：前端修改传参方式适配后端@RequestParam #

如果不想改动后端代码，可以将前端的传参方式改为表单数据或URL查询参数。

方式A：发送表单数据 #

function sendThefknData(mangaId) {
    const formData = new FormData();
    formData.append('mangaId', mangaId);
    
    axios.post('/saveManga', formData)
        .then(response => {
            console.log('Manga saved successfully:', response.data);
        })
        .catch(error => {
            console.error('There was an error saving the manga:', error);
        });
}

方式B：将参数放在URL查询字符串中 #

function sendThefknData(mangaId) {
    axios.post('/saveManga', null, {
        params: {
            mangaId: mangaId
        }
    })
        .then(response => {
            console.log('Manga saved successfully:', response.data);
        })
        .catch(error => {
            console.error('There was an error saving the manga:', error);
        });
}

内容的提问来源于stack exchange，提问作者molLbach