How should a django app handle a post request from a reactjs form

Question

I wrote a views function in my django app for user registration, the code for which is as follows:

def register(request):

    if request.method == 'POST':
        data1 = json.dumps(request.POST)
        data = json.loads(data1)
        full_name = data['userName']
        company_name = data['agencyName']
        phone = data['phoneNumber']
        email_id = data['email']
        password = data['password']
        password2 = data['confirmpassword']

            #Check if passwords match
        if password == password2:
            #Check username
            if MyUser.objects.filter(email=email_id).exists():
                messages.error(request,'That email is being used')
                return redirect('register')
            else:
                #Looks good
                user = MyUser.objects.create_user(password=password,
                                                email=email_id, full_name=full_name,company_name=company_name,phone=phone)

                user.save()
                messages.success(request,'You are now registered')
                return HttpResponse(json.dumps({'success':'success'}), content_type='application/json')
        else:
            messages.error(request,'Passwords donot match')
            return HttpResponse(json.dumps({'error':'password donot match'}), content_type='application/json')

        return HttpResponse(json.dumps({'none':'none'}),content_type='application/json')

The reactjs code is:

class SignupForm extends Component {
    constructor(props) {
        super(props);

        this.state = {
          userName: null,
          agencyName: null,
          email: null,
          password: null,
          confirmpassword: null,
          phoneNumber: null,
          formErrors: {
            userName: "",
            agencyName: "",
            email: "",
            password: "",
            confirmpassword:"",
            phoneNumber :""
          }
        };
      }

      handleSubmit = e => {
        e.preventDefault();

        if (formValid(this.state)) {
          fetch('https://localhost:8000/accounts/register', {
            method: 'POST',
            body: this.state,
            headers:{
            // 'Access-Control-Allow-Origin':'*',
            'Content-Type':'application/json',
          }
            });
        } else {
          console.error("FORM INVALID - DISPLAY ERROR MESSAGE");
        }
      };

The front-end of the website is made in reactjs and when I try to send a POST request from the react app for registration, it doesn't register's the user.

Also when I send a post request from postman to it for user registration it works fine and create the user. However when I try to send a json object from postman something like this

{'userName':'abcdef','phoneNumber':'123456789',email='abc@xyz.com','password':'1234','confirmpassword':'1234','agencyName':'abbb'}

it shows the following error:

KeyError at /accounts/register
'userName'

How should I resolve this? What are the ways through which I can handle a POST request in Django from a react app?

Also the back-end django app is uploaded on a heroku server and the front-end react app is using the urls of the app uploaded on heroku.

Answer 1

These two lines are nonsense:

    data1 = json.dumps(request.POST)
    data = json.loads(data1)

There would never be any point converting the form data dict to JSON and then straight back to Python.

However your issue is that you are not sending form data in the first place, but your are sending JSON. Replace those lines with:

    data = json.loads(request.body)

Answer 2

If POST request is working fine with postman then there may be something wrong with the JSON format you are sending from reactjs. console this.state and check if it is in correct JSON format.