Django error , Broken pipe from ('127.0.0.1', 33609)

Question

I am creating django project and got this error. Broken pipe from ('127.0.0.1', 33609). What I've been trying to do is that I created table using auth_user table (default user authentication table of django framework) and I created my own table. When the user register , I will record it in auth_user table by using User.objects.create_user() then I create my own object and then .save() to my table. In this step , I created the nested property and I think I assigned each property in the correct way. From what I've got , both of them are successful and the records are saved to database. For the frontend ,I use axios with function .then to receive response from the server and it gives me error saying that Broken pipe from ('127.0.0.1', 33609). I've tried to debug this many ways and each of the way I tried , it makes no sense at all because both object are saved to database. Besides, the object mapping is correct (that's what I think). Here is my code (quite long , sorry for that)

from django.http.response import JsonResponse
from django.shortcuts import render
from django.contrib.auth import authenticate , login
from django.contrib.auth.models import User
from application1.models import Customer , Status

def register_post(request):
    try:
      # return object {'status_code':  , 'result': "" }
      if request.method == 'GET':
          return JsonResponse({'result': 'invalid request'})
      _name = request.POST.get('name',None)
      _surname = request.POST.get('surname',None)
      _mobile = int(request.POST.get('mobile',None))
      _username = request.POST.get('username',None)
      _password = request.POST.get('password',None)
      _confirm_password = request.POST.get('confirm_password',None)

      if User.objects.filter(username=_username).first() != None:
          return JsonResponse({'status_code': 401 , 'result': 'fail , username already 
                                exist in database'})

      print("This is name >>")
      print(_name)
      print("This is surname >>")
      print(_surname)
      print("This is mobile >>")
      print(_mobile)
      print("This is username >> ")
      print(_username)
      print("This is password >> ")
      print(_password)
      print("This is confirmed password >> ")
      print(_confirm_password)


      if _password != _confirm_password:
          return JsonResponse({'status_code': 408 , 'result': "fail , password doesn't 
                               match with confrim password "})

      # perform create user 
      # insert this record in default django table along with newly created table
      # ----------
      customer_status = Status.objects.get(id = 3)
      print("query customer status object >> ")
      print(customer_status)

      new_user = User.objects.create_user(username = _username , password = _password ,
      first_name = _name , last_name = _surname)
      print("new user created >> ")
      print(new_user)
      new_user.save()
      # insert record along with newly created table

      
      
      # query it from the database and then assign it to the new one
      # just to make sure that it got correct model
      user_query = User.objects.get(username = _username)

      print("before object creation >> ")
      print("This is name >> " + str(_name))
      print("This is surname >> " + str(_surname))
      print("This is mobile >> " )
      print(int(_mobile))
      print("This is customer status query result >> ")
      print(model_to_dict(customer_status))
      print("This is user query object >> ")
      print(model_to_dict(user_query))
      print("------------------- Then object creation --------------------")
    
      new_customer = Customer(name = str(_name) , surname = str(_surname) , mobile = 
                     int(_mobile) , register = user_query ,status = customer_status)
      print("new customer obj created >> ")
      print(model_to_dict(new_customer))
    
      print("before save -----")
      new_customer.save()
      print("everything is done")
    
      return JsonResponse({'status_code': 200 , 'result': 'success'})
  except:
      return JsonResponse({'status_code': 403 , 'result': 'fail to save to database'})

Followed by my frontend ( Vuejs and Axios are used )

{% extends 'main.html' %}
{% block body %}
    <br>
    <div id="app1">
        <div align="center">
        <h3>Hello World welcome to register page</h3>
        </div>
    <form>
    <div class="form-group">
    <label>Name</label>
    <input type="text" class="form-control"placeholder="Name"
    v-model="sending_obj.name" required />
  </div>
  <div class="form-group">
    <label>Surname</label>
    <input type="text" class="form-control"placeholder="Surname"
    v-model="sending_obj.surname" required />
  </div>
  <div class="form-group">
    <label>Mobile</label>
    <input type="number" class="form-control"placeholder="mobile"
    v-model="sending_obj.mobile" required />
  </div>
<div class="form-group">
    <label>Username</label>
    <input type="text" class="form-control"placeholder="Enter username"
    v-model="sending_obj.username" required />
  </div>
  <div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control"placeholder="Password"
    v-model="sending_obj.password" required />
  </div>
  <div class="form-group">
    <label>Confirm Password</label>
    <input type="password" class="form-control"placeholder="Confirm-Password"
    v-model="sending_obj.confirm_password" required />
  </div>
  <br>
  <button type="submit" class="btn btn-button btn-outline-primary" @click="submit()">Submit</button>
    </form>
    </div>
{% endblock %}
{% block script %}
    <script>
        var component = {
            delimiters: ["[[","]]"],
            el: '#app1',
            data: {
                sending_obj: {
                    name: '',
                    surname: '',
                    mobile: '',
                    username: '',
                    password: '',
                    confirm_password: '',
                },//end of sending_obj
            },//end of data
            methods: {
                submit(){
                    
                    var sender = new FormData();
                    sender.append('name',this.sending_obj.name);
                    sender.append('surname',this.sending_obj.surname);
                    sender.append('mobile',this.sending_obj.mobile);
                    sender.append('username' , this.sending_obj.username);
                    sender.append('password' , this.sending_obj.password);
                    sender.append('confirm_password' , this.sending_obj.confirm_password);
                    sender.append("csrfmiddlewaretoken", '{{csrf_token}}');


                    if(this.sending_obj.name == '' || this.sending_obj.surname == '' ||
                    this.sending_obj.mobile == '' || this.sending_obj.username == '' ||
                    this.sending_obj.password == '' || this.sending_obj.confirm_password == ''){
                        alert("please fill out every field");
                        return;
                    }//end of if


                    axios.post("{% url 'register_post' %}" , sender)
                    .then(response => {
                        console.log(response)
                        console.log(response.data);
                        if(response.data.status_code == 200){
                            alert("success");
                            window.location = "{% url 'home' %}";
                        }//end of if 
                        else if(response.data.status_code != 200){
                            alert(response.data.result);
                        }//end of else if
                    })
                    .catch(error => {
                        alert(error);
                    });
                    

                },//end of function
            },//end of methods
        };

        var vueJs = new Vue(component);
    </script>
{% endblock %}

and urlpatterns array

urlpatterns = [
    path('accounts/', include('django.contrib.auth.urls')),
    path('', pages.home , name="home"),
    path('adminpage/' , pages.admin_page , name='admin_page'),
    path('register/' , pages.register , name='register'),
    path('registerpost/' , controllers.register_post , name='register_post'),    
]

# controllers and pages are views in term of django , I use these words for my own understanding

please note that I use mysql as database

Answer 1

I also was able solve this issue.

My html button was type submit,

and i was sending ajax(async) request,

The python server served my ajax request before submit ends.

Thus, this error.

Solution: Instead of using input type="submit", use input type="button" for ajax calling.