在React.js中使用axios进行请求时出现400（错误请求）状态码

Question

它在向邮递员发出请求时起作用，例如在reactjs中尝试与axios一起使用时，其显示400个状态代码。

我已经尝试过 -添加删除标题 -添加边界：-foo

handleSubmit(event) {
let data = new FormData();
      data.append("username", this.state.username)
      data.append("password", this.state.password)
      data.append("confirm_password", this.state.confirm_password)
      data.append("email", this.state.email)
      event.preventDefault();
      axios({
         method: 'post',
         url: 'http://localhost:8000/api/account/register/',
         data: data,
      headers:{
         "Content-Type":"application/x-www-form-urlencoded; boundary:XXboundaryXX"
      }
      })
         .then((response) => {
             console.log('bitchhh');

         })
         .catch((response) => {
            //handle error
            console.log(response);
         });
   }

[] 3

Answer 1

如果数据中有任何错误，rest框架不会返回2xx状态代码，而是始终返回400错误请求。这意味着您发送的请求中有错误。

邮递员也收到了400个错误请求，但它显示了响应数据（错误消息）。

axios将400状态代码视为错误，因此您必须在catch块中对其进行处理。如果您要访问发送有错误的响应，可以从以下位置访问

.catch((err) => {
    //handle error
    console.log(err.response.data);
 });

Answer 2

.catch(err => {
      alert(err.response.data.non_field_errors);
    });