API调用在Postman中正常，React客户端中失败的原因排查

后端getList接口通过req.body获取userId和name参数，使用Postman以x-www-form-urlencoded格式发送GET请求可正常返回数据，但在React客户端中使用Axios发送GET请求时，尽管控制台打印的参数正确，却始终返回"Please enter name and userID"错误。

后端Controller代码 #

//controller    
const getList = asyncHandler(async (req, res) => {
      const { userId, name } = req.body;
    
      if (!userId || !name) {
        res.status(400).json({ error: 'Please enter name and userID' });
        return;
      }
    
      try {
        const user = await User.findById(userId).populate({
          path: 'lists',
          populate: { path: 'books', select: 'title author coverImage' },
        });
    
        const userList = user.lists.find((list) => list.listName === name);
    
        if (!userList) {
          res.status(400).json({ error: 'List does not exist' });
          return;
        }
    
        res.json(userList);
      } catch (err) {
        console.log(err);
        res.status(400);
      }
    });

React客户端代码 #

const user = JSON.parse(localStorage.getItem('user'));
  const userName = user.name;
  const userId = user._id;
  const API_URL = 'http://localhost:8080/api/lists/get-list';
  const [list, setList] = useState();
  const name = 'Currently Reading';

  useEffect(() => {
    const getCurrent = async (userId, name) => {
      const listReq = { userId, name };
      console.log(listReq);
      try {
        const response = await axios.get(API_URL, listReq);
        return response.data;
      } catch (error) {
        console.log(error);
      }
    };
    getCurrent(userId, name);
  }, []);

1. HTTP规范冲突：虽然Postman支持给GET请求添加请求体，但HTTP规范中GET请求设计为不携带请求体，不同服务器、客户端对GET请求的body处理逻辑不一致，Axios默认不会将第二个参数作为GET请求的body发送。
2. Axios用法错误：Axios的get方法第二个参数是配置对象，不是请求体。直接传listReq会被当成配置项，而非放到请求body中，导致后端req.body接收不到参数。

方案1：改用查询参数传递（推荐，符合REST规范） #

后端代码调整 #

将req.body替换为req.query，从URL查询参数中获取值：

//controller    
const getList = asyncHandler(async (req, res) => {
      const { userId, name } = req.query; // 改为从查询参数获取
    
      if (!userId || !name) {
        res.status(400).json({ error: 'Please enter name and userID' });
        return;
      }
    
      try {
        const user = await User.findById(userId).populate({
          path: 'lists',
          populate: { path: 'books', select: 'title author coverImage' },
        });
    
        const userList = user.lists.find((list) => list.listName === name);
    
        if (!userList) {
          res.status(400).json({ error: 'List does not exist' });
          return;
        }
    
        res.json(userList);
      } catch (err) {
        console.log(err);
        res.status(400).json({ error: err.message }); // 优化错误返回
      }
    });

前端代码调整 #

Axios发送GET请求时，将参数放入params配置项，自动转为URL查询参数：

const user = JSON.parse(localStorage.getItem('user'));
const userId = user._id;
const API_URL = 'http://localhost:8080/api/lists/get-list';
const [list, setList] = useState();
const name = 'Currently Reading';

useEffect(() => {
  const getCurrent = async (userId, name) => {
    const listReq = { userId, name };
    console.log(listReq);
    try {
      // 通过params字段传递查询参数
      const response = await axios.get(API_URL, { params: listReq });
      setList(response.data); // 记得更新状态
      return response.data;
    } catch (error) {
      console.log(error.response?.data?.error || error.message);
    }
  };
  getCurrent(userId, name);
}, [userId, name]); // 添加依赖项，避免闭包问题

方案2：强行给GET请求添加请求体（不推荐） #

如果必须用请求体传递参数，需要显式配置Axios的data字段，但这种方式兼容性差，不符合HTTP规范：

useEffect(() => {
  const getCurrent = async (userId, name) => {
    const listReq = { userId, name };
    console.log(listReq);
    try {
      const response = await axios.get(API_URL, {
        data: listReq, // 显式设置请求体
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded' // 匹配后端接收格式
        }
      });
      setList(response.data);
      return response.data;
    } catch (error) {
      console.log(error.response?.data?.error || error.message);
    }
  };
  getCurrent(userId, name);
}, [userId, name]);

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