React中Axios发送嵌套JSON对象Post请求报错及解决方案咨询

问题描述 #

使用Axios发送包含嵌套对象的POST请求时，出现Unexpected token e in JSON at position 0错误，相关代码如下：

const submit = () => {
    axios
      .post(
        `baseUrl/api/birthCertificate/register`,
        {
          birthCertificate: {
            first_name: "abebe",
            middle_name: "kebede",
            last_name: "kebede",
            date_of_birth: "1998-10-10",
            gender: "male",
            nationality: "22",
            phone_number: "0987654321",
            email: "user27@gmail.com",
            birth_place: {
              country: "chad",
              province: "",
              subProvince: "",
              birthType: "hospital",
              hospitalName: "chad hospital",
            },
            fullNameOfFather: "father full name",
            fullNameOfMother: "mother full name",
            nationalityOfFather: "22",
            nationalityOfMother: "22",
            idCardImage: "idCardImage",
            personImage: "personImage",
            userAddress: {
              region: "Addis Ababa",
              city: "Addis Ababa",
              state: "Addis",
              zone: "02",
              street: "green-street",
              house_number: ".232",
            },
          },
        }
      )
      .then(
        (response) => {
          alert("success");
        },
        (err) => {
          console.log(err);
        }
      );
  };

替代实现方式 #

方式1：显式设置请求头并序列化请求体 #

手动指定Content-Type为application/json，并将请求体主动序列化为JSON字符串，避免Axios自动处理时的潜在问题：

const submit = () => {
  const postData = {
    birthCertificate: {
      first_name: "abebe",
      middle_name: "kebede",
      last_name: "kebede",
      date_of_birth: "1998-10-10",
      gender: "male",
      nationality: "22",
      phone_number: "0987654321",
      email: "user27@gmail.com",
      birth_place: {
        country: "chad",
        province: "",
        subProvince: "",
        birthType: "hospital",
        hospitalName: "chad hospital",
      },
      fullNameOfFather: "father full name",
      fullNameOfMother: "mother full name",
      nationalityOfFather: "22",
      nationalityOfMother: "22",
      idCardImage: "idCardImage",
      personImage: "personImage",
      userAddress: {
        region: "Addis Ababa",
        city: "Addis Ababa",
        state: "Addis",
        zone: "02",
        street: "green-street",
        house_number: ".232",
      },
    },
  };

  axios.post(
    `baseUrl/api/birthCertificate/register`,
    JSON.stringify(postData),
    {
      headers: {
        'Content-Type': 'application/json'
      }
    }
  )
  .then(response => {
    alert("success");
  })
  .catch(err => {
    console.log(err);
  });
};

方式2：使用原生Fetch API替代Axios #

如果Axios的问题无法定位，可尝试用原生Fetch API实现请求，逻辑更透明：

const submit = () => {
  const postData = {
    birthCertificate: {
      first_name: "abebe",
      middle_name: "kebede",
      last_name: "kebede",
      date_of_birth: "1998-10-10",
      gender: "male",
      nationality: "22",
      phone_number: "0987654321",
      email: "user27@gmail.com",
      birth_place: {
        country: "chad",
        province: "",
        subProvince: "",
        birthType: "hospital",
        hospitalName: "chad hospital",
      },
      fullNameOfFather: "father full name",
      fullNameOfMother: "mother full name",
      nationalityOfFather: "22",
      nationalityOfMother: "22",
      idCardImage: "idCardImage",
      personImage: "personImage",
      userAddress: {
        region: "Addis Ababa",
        city: "Addis Ababa",
        state: "Addis",
        zone: "02",
        street: "green-street",
        house_number: ".232",
      },
    },
  };

  fetch(`baseUrl/api/birthCertificate/register`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(postData),
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    alert("success");
  })
  .catch(err => {
    console.log(err);
  });
};

额外排查建议 #

如果以上方式仍报错，优先检查浏览器开发者工具的Network面板：

• 确认请求体是否正确发送（Payload标签）
• 查看后端返回的响应内容（Response标签），是否为合法JSON格式——Unexpected token e通常是因为后端返回了非JSON字符串（比如错误提示文本），导致解析失败。

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