如何使用Axios实例以单个值作为请求体发送POST请求

你的问题出在Axios对非对象类型请求体的默认处理逻辑上——直接传递数字itemId时，Axios无法正确生成后端可解析的请求格式，导致400 Bad Request。以下是几种可行的解决方式：

方式一：以纯文本格式传递数值 #

如果后端期望请求体是纯文本类型的数字，显式设置Content-Type为text/plain，并将数值转为字符串：

const loadMyItem = async (itemId) => {
    console.log("itemId:: ", itemId);
    setLoading(true);
    axiosInstance.post(
      URL_GetMyItem,
      itemId.toString(),
      {
        headers: {
          'Content-Type': 'text/plain'
        }
      }
    ).then((res) => {
      console.log("res", res);
      setMyItem(res?.result);
    }).catch((err) => {
      errorHandler(err);
    }).finally(() => {
      setLoading(false)
    })
  }

方式二：以JSON格式传递单个数值 #

如果后端接受JSON格式的单个值（而非键值对对象），手动将数值序列化为JSON字符串并指定Content-Type：

const loadMyItem = async (itemId) => {
    console.log("itemId:: ", itemId);
    setLoading(true);
    axiosInstance.post(
      URL_GetMyItem,
      JSON.stringify(itemId),
      {
        headers: {
          'Content-Type': 'application/json'
        }
      }
    ).then((res) => {
      console.log("res", res);
      setMyItem(res?.result);
    }).catch((err) => {
      errorHandler(err);
    }).finally(() => {
      setLoading(false)
    })
  }

方式三：通过transformRequest统一处理 #

如果需要多次调用这类接口，可以在axios实例中配置transformRequest，自动处理非对象请求体：

export const axiosInstance = axios.create({
  ...AXIOS_BASE_CONFIG,
  transformRequest: [(data, headers) => {
    // 如果请求体不是对象，直接转为字符串并设置对应请求头
    if (typeof data !== 'object') {
      headers['Content-Type'] = 'text/plain';
      return data.toString();
    }
    // 默认处理对象类型的请求体
    return JSON.stringify(data);
  }]
});

之后直接传递itemId即可，无需每次手动设置头信息。

原因说明 #

Axios默认会将对象类型的请求体序列化为JSON并设置Content-Type: application/json，但对于数字、字符串这类原始类型，它的默认处理逻辑可能不符合后端的解析要求，导致后端无法识别请求体内容，返回400错误。通过明确指定请求头和请求体格式，就能让后端正确解析你的请求。

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