Reactjs axios将数据发布为表单数据，而不是有效负载中的JSON

我只是在尝试我的第一个reactJS应用程序

因为我使用axios.post（）方法发送数据

submitHandler = event => {
  event.preventDefault();
  axios
    .post("http://demo.com/api/v1/end-user/login", {
      username: "",
      password: "",
      user_type: 1
    })
    .then(res => {
      console.log(res);
      console.log(res.data);
    });
}

但当我签入我的网络选项卡时，我随请求一起发送的数据似乎在有效负载中

---

我想改为将数据作为表单数据发送。我是否遗漏了什么？

如果希望在有效负载中以表单数据而不是JSON的形式发送数据，可以创建一个对象并将其用作第二个参数

submitHandler = event => {
  event.preventDefault();

  const formData = new FormData();
  formData.append("username", "");
  formData.append("password", "");
  formData.append("user_type", 1);

  axios.post("http://demo.com/api/v1/end-user/login", formData).then(res => {
    console.log(res);
    console.log(res.data);
  });
};

---

您可以在axios中使用FormData（）来实现这一点，如

然后您可以使用axios post方法（您可以相应地修改它）

---

第二个参数应该字符串化为JSON并用作请求负载。这不是您想要的吗？不需要显式指定标题

var body = new FormData();
body.append('userName', 'test');
body.append('password', 'test');
body.append('user_type', 1);

axios({
    method: 'post',
    url: 'http://demo.com/api/v1/end-user/login',
    data: body,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });