使用Axios请求Spring Boot服务器时返回Bad Request问题排查

问题描述 #

调用Spring Boot服务器的/searchPatient接口时，Postman请求完全正常，但React项目使用Axios发送请求时，后端始终返回Bad Request。

后端代码（Spring Boot） #

@GetMapping(value = "/searchPatient")
public ResponseEntity<?> searchPatients(@RequestParam String id_num,
                                        @RequestParam String name) {
    List<PatientForSearchDto> patientForSearchDtos = patientService.viewSearchedPatient(id_num, name);
    return ResponseEntity.status(HttpStatus.OK).body(
            new ResponseObject("ok", "Success", patientForSearchDtos)
    );
}

前端代码（React + Axios） #

async function sendRequest () {
    const formData = new FormData();
    formData.append('id_num', id_num);
    formData.append('name', name);
    console.log(formData)
    console.log(formData.get('name'))
    console.log(formData.get('id_num'))
    const config = {
        method: 'get',
        url: 'http://localhost:8080/api/searchPatient',
        // headers : {
        //     'Content-Type': 'from-data'
        // },
        data : formData
    };

    await axios(config)
    .then(function (response) {
        console.log(JSON.stringify(response.data));
        setPatientList(response.data.data.object)
    })
    .catch(function (error) {
        console.log(error);
    });
}

请求情况对比 #

• Postman正常请求：通过GET方法，将id_num和name作为URL查询参数传递，后端能正确接收参数并返回响应。
• React请求报错：Axios请求返回Bad Request，后端提示缺少id_num或name参数。

问题原因及解决办法 #

核心问题 #

GET请求规范中不允许携带请求体（data），Spring Boot的@RequestParam注解是从URL的查询参数中获取值，而非请求体。你用FormData作为GET请求的data，Axios会忽略该参数，导致后端接收不到必要的查询参数，从而返回Bad Request。

修正后的前端代码 #

方式一：使用Axios的params配置项（推荐）

async function sendRequest () {
    const config = {
        method: 'get',
        url: 'http://localhost:8080/api/searchPatient',
        params: {
            id_num: id_num,
            name: name
        }
    };

    try {
        const response = await axios(config);
        console.log(JSON.stringify(response.data));
        setPatientList(response.data.data.object);
    } catch (error) {
        console.log(error);
    }
}

方式二：直接拼接查询参数到URL

async function sendRequest () {
    const url = `http://localhost:8080/api/searchPatient?id_num=${encodeURIComponent(id_num)}&name=${encodeURIComponent(name)}`;
    try {
        const response = await axios.get(url);
        console.log(JSON.stringify(response.data));
        setPatientList(response.data.data.object);
    } catch (error) {
        console.log(error);
    }
}

额外说明 #

• 无需设置Content-Type为multipart/form-data，GET请求不需要该请求头，且你之前的拼写错误（from-data应为multipart/form-data）也会导致问题。
• 使用encodeURIComponent可以避免参数中包含特殊字符时出现URL解析错误。

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