Spring后端接收前端searchQuery参数缺失问题求助

我在开发搜索功能时，遇到前端搜索查询参数无法传递到后端的问题，试了网上大部分方案都没解决。下面是完整错误日志、前端Vue代码和后端Spring Controller代码：

完整错误日志 #

2022-10-12 15:05:10.575 WARN 21272 --- [nio-8090-exec-2] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.bind.MissingServletRequestParameterException: Required request parameter 'searchQuery' for method parameter type String is not present]

前端Vue代码 #

<template>
<div class="input-group mb-3">
        <input type="search" class="form-control rounded" v-model="searchQuery" placeholder="Company name" aria-label="Search" aria-describedby="search-addon" />
        <button type="button" class="btn btn-outline-primary" @click='searchRecord'>Search</button>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    name: 'RegistrationEnquiry',
    components: {

    },
    data() {
        return {
            records: [],
            searchQuery: '',
        };
    },
    computed: {},
    methods: {
        searchRecord(){
            axios.post('searchRecord', this.searchQuery)
            .then(successResponse => {
                console.log(successResponse)
                })
                .catch(failResponse => {
                    alert("Error(failResponse)")
                    console.log(failResponse)
                })

        },
    },
}

</script>

后端Spring Controller代码 #

@Controller
public class SearchRecordController {
    @Autowired
    SearchRecordService searchRecordService;

    @CrossOrigin
    @PostMapping(value = "api/searchRecord")
    @ResponseBody
    public String searchRecord(@RequestParam(value = "searchQuery") String searchQuery) {
        System.out.println(searchQuery);
        return searchRecordService.searchRecordService(searchQuery);
    }
}

问题原因及修复方案 #

问题1：请求路径不匹配 #

后端接口路径是/api/searchRecord，但前端请求写的是searchRecord，会导致请求发送到当前页面路径下的searchRecord，而非后端的API接口。

问题2：参数传递方式不匹配 #

后端用@RequestParam接收URL参数或表单参数，但前端直接将字符串作为请求体发送，后端无法识别为searchQuery参数。

修复方案一：前端调整参数传递方式（后端保持不变） #

修改前端searchRecord方法，将参数放在params中传递，或者用表单格式传递：

方式1：使用axios的params参数

searchRecord(){
    axios.post('/api/searchRecord', {}, {
        params: {
            searchQuery: this.searchQuery
        }
    })
    .then(successResponse => {
        console.log(successResponse)
    })
    .catch(failResponse => {
        alert("Error")
        console.log(failResponse)
    })
}

方式2：使用URLSearchParams传递表单格式参数

searchRecord(){
    const params = new URLSearchParams();
    params.append('searchQuery', this.searchQuery);
    axios.post('/api/searchRecord', params)
    .then(successResponse => {
        console.log(successResponse)
    })
    .catch(failResponse => {
        alert("Error")
        console.log(failResponse)
    })
}

修复方案二：后端改为接收请求体（前端调整参数格式） #

后端修改：用@RequestBody接收请求体

@Controller
public class SearchRecordController {
    @Autowired
    SearchRecordService searchRecordService;

    @CrossOrigin
    @PostMapping(value = "/api/searchRecord")
    @ResponseBody
    public String searchRecord(@RequestBody String searchQuery) {
        System.out.println(searchQuery);
        return searchRecordService.searchRecordService(searchQuery);
    }
}

前端修改：传递JSON格式参数

searchRecord(){
    axios.post('/api/searchRecord', { searchQuery: this.searchQuery })
    .then(successResponse => {
        console.log(successResponse)
    })
    .catch(failResponse => {
        alert("Error")
        console.log(failResponse)
    })
}

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