How to fix "net::ERR_CONNECTION_REFUSED and Error: Network Error" error in Reactjs,Django,Django Rest Frame work project

Question

I am trying pass data from reactjs to django through django rest api by post method but there raising this problem. I have tested post method through Django-REST Api GUI.It's working perfectly.

My Reactjs component code:

import React, { Component } from 'react' import './Register.css'; import axios from 'axios'

const REGISTER_URL = 'http://127.0.0.1:8000/api/register/?format=json' // received api ulr...

const initiaState = { username : '', email : '', password: '' }

class Register extends Component{

constructor(){
    super()

    this.myRegister = React.createRef()
}


state = {
    ...initiaState
}


changeHandler = (event) => {

    this.setState({
        [event.target.name]: event.target.value
    })

}

submitHandler = (event) =>{
    event.preventDefault()
    console.log(this.state)
    this.myRegister.current.reset()
    this.setState({
        ...initiaState
    });
    axios.post(REGISTER_URL,this.state)
    .then(res =>{
        console.log(res)

    })
    .catch(error =>{
        console.log("ERROR::: "+error)
    })
}

render(){

    return(
        <div className="Register-box">

        <form ref = {this.myRegister} className="Form" onSubmit={this.submitHandler }>
            <div className ="form-group ">
              <label htmlFor="username" > Name: </label>
               <input
               className = "from-control ml-4"
               type="text" 
               placeholder = '  Enter Your Name '
               name = "username"
               id = "username"
               value = {this.state.name} 
               onChange = {this.changeHandler}
               />
            </div>

            <div className ="form-group">
              <label htmlFor="email" > Email: </label>
               <input 
               className = "from-control ml-4" 
               type="text" 
               placeholder = '  Enter Your Email '
               name = "email"
               id = "email"
               value = {this.state.email} 
               onChange = {this.changeHandler}
               />
            </div>

            <div className ="form-group">
              <label htmlFor="password" className="mr-4"> Password: </label>
               <input
               className = "from-control ml-2" 
               type="password" 
               placeholder = '  Enter Your Password '
               name = "password"
               id = "password"
               value = {this.state.password} 
               onChange = {this.changeHandler}
               />
            </div>



            <button className = "btn btn-primary" type="submit" value="Submit"> Submit </button>
        </form>



        </div>

    );

}

}

export default Register;

Answer 1

The error is the server connection error. Make sure you have run your server properly.

1. Check your IP address is correct or not
2. As you are running your Django server as debugging/testing mode. Run your server using python manage.py runserver 0.0.0.0:8000 here 8000 is the port number.