如何在Axios POST请求中发送JSON数据？解决400错误

问题描述 #

我需要将以下JSON作为请求体通过Axios发送POST请求：

{
        "userName": "arijitdas10101",
        "userPassword":"arijit",
        "firstName": "arijit2",
        "lastName": "das",
        "phone": "1234567891",
        "email": "das@gmail.com",
        "aadharNo": "123456789112",
        "addressDTO":
            {
                "streetName": "14/1 west",
                "city":"Delhi",
                "state":"WB",
                "pinCode": 70012166
            }
}

但使用以下代码发送时，返回了HTTP 400状态码：

export const register = (userName,userPassword,firstName,lastName,phone,email,aadharNo,streetName,city,state,pincode) => async (dispatch) => {

try{
    dispatch({
        type:USER_REGISTER_REQUEST
    })
    const config = {
        headers: {
            "Content-Type": "application/json",
        },
        };
        const addressDTO={streetName,city,state,pincode}
    const {responseData} = await axios.post(`http://localhost:6969/v1/api/createCustomer`,{userName,userPassword,firstName,lastName,phone,email,aadharNo,addressDTO},config)
    console.log(responseData);
    dispatch({
        type:USER_REGISTER_SUCCESS,
        payload:data
    })
}catch(error){
    dispatch({
        type:USER_REGISTER_FAIL,
        payload:error.response && error.response.data.message ? error.response.data.message : error.message
    })
}
}

错误原因及修正方案 #

你的代码存在三个关键问题，导致后端返回400（请求参数错误）：

1. 字段名不匹配 #

目标JSON中地址的邮编字段是pinCode（驼峰写法，大写C），但你定义addressDTO时用的是pincode（全小写），后端校验字段时会识别不到正确参数，直接返回400。

2. Axios响应解构错误 #

Axios POST请求返回的响应对象中，实际数据存储在data属性里，而非responseData。你错误解构了不存在的responseData，导致后续变量未定义。

3. Dispatch payload变量名错误 #

你在USER_REGISTER_SUCCESS的dispatch中使用了data作为payload，但data从未被定义过，应该使用解构出来的正确变量。

修正后的代码 #

export const register = (userName, userPassword, firstName, lastName, phone, email, aadharNo, streetName, city, state, pincode) => async (dispatch) => {
  try {
    dispatch({ type: USER_REGISTER_REQUEST });

    const config = {
      headers: {
        "Content-Type": "application/json",
      },
    };
    // 修正字段名：pincode → pinCode
    const addressDTO = { streetName, city, state, pinCode: pincode };
    // 修正解构：从响应中获取data属性
    const { data } = await axios.post(
      `http://localhost:6969/v1/api/createCustomer`,
      { userName, userPassword, firstName, lastName, phone, email, aadharNo, addressDTO },
      config
    );

    console.log(data);
    // 修正payload变量：使用正确的data
    dispatch({
      type: USER_REGISTER_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: USER_REGISTER_FAIL,
      payload: error.response && error.response.data.message ? error.response.data.message : error.message,
    });
  }
};

额外检查建议 #

• 确认后端接口接收的字段名与你发送的完全一致，包括大小写和驼峰/下划线格式
• 可以在axios.post前先打印请求体，确认生成的JSON和目标结构完全匹配：

  const requestBody = { userName, userPassword, firstName, lastName, phone, email, aadharNo, addressDTO };
  console.log('请求体：', requestBody);
  

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