使用Axios(ReactJS)发请求遇400 Bad Request，Postman可正常请求

问题 #

通过携带Bearer Token的FormData发送GET请求获取患者列表，Postman测试可正常返回结果，但使用Axios发送请求时持续出现400 Bad Request错误。相关React代码如下：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams, Link, useNavigate } from 'react-router-dom';
import ReactLoading from 'react-loading';
import { useQuery } from 'react-query';
import { API } from '../../../api/GeneralAPI';
import FetchingError from '../../../Authentication/Views/ErrorView/FetchingError';
import SearchPatientUnderGuide from './SearchPatientUnderGuide';
function FetchPatientUnderGuide() {
    const {id} = useParams();
    console.log(id)
    const navigate = useNavigate();
    const url = API + "getAllPatientsOfDoctor"
    const token = localStorage.getItem('token');
    const fetchPatients = async () => {
        let formData = new FormData();
        formData.append('id', id)
        console.log("ID is: " + formData.get('id'));
        console.log(`Bearer ${token}`)
        const fetchData = await axios({
            method: 'get',
            url: url,
            headers: {
                Authorization: `Bearer ${token}`
            },
            data : formData})
        return fetchData;
    }
    const query = useQuery('patients', fetchPatients)
    return ( 
        <div>
        {query.isLoading
        ? <ReactLoading type="spin" color="#0000FF"
        height={100} width={50}/>
        : query.isError
        ? <FetchingError />
        : query.data
        ? <div>
            <SearchPatientUnderGuide details = {query.data.data.object} />
        </div>
        : null}
        </div>
     );
}

export default FetchPatientUnderGuide

相关截图：

问题排查与解决方案 #

核心问题：GET请求使用data参数不符合规范 #

HTTP规范中，GET请求通常不携带请求体（body），Axios也不会为GET请求发送data字段中的内容。你在Postman中选择Form Data发送GET请求时，Postman会自动将表单参数转换为URL查询参数（即拼在URL末尾的?id=xxx），但Axios不会做这个转换，导致后端无法接收到id参数，返回400错误。

修复方案 #

方案1：将id作为查询参数拼入URL

修改请求URL，把id直接作为查询参数添加，同时移除data配置：

const fetchPatients = async () => {
    console.log(`Bearer ${token}`)
    const fetchData = await axios({
        method: 'get',
        url: `${API}getAllPatientsOfDoctor?id=${id}`, // 拼接查询参数
        headers: {
            Authorization: `Bearer ${token}`
        }
    })
    return fetchData;
}

方案2：使用params自动转换为查询参数（推荐）

Axios的params配置会自动将对象转为URL查询参数，无需手动拼接：

const fetchPatients = async () => {
    const fetchData = await axios({
        method: 'get',
        url: `${API}getAllPatientsOfDoctor`,
        headers: {
            Authorization: `Bearer ${token}`
        },
        params: { id } // 自动转为?id=xxx格式
    })
    return fetchData;
}

额外检查点 #

1. 打开浏览器Network面板，确认请求头的Authorization字段是否正确携带Bearer ${token}，避免token为空或格式错误。
2. 检查id参数是否从useParams()正确获取，对比Network面板中请求URL的参数与Postman的参数是否一致。

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