在reactjs中使用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 framework 不會返回 2xx 狀態代碼，它總是返回 400 bad request。 這意味着您發送的請求中有錯誤。

郵遞員也收到 400 個錯誤的請求，但它顯示了響應數據（錯誤消息）。

axios 將 400 狀態代碼視為錯誤，因此您必須在 catch 塊中處理它。 如果您想訪問發送錯誤的響應，您可以從

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

Answer 2

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