如何修复 Reactjs、Django、Django Rest Frame 工作项目中的“net::ERR_CONNECTION_REFUSED 和错误：网络错误”错误答案

【问题标题】：How to fix "net::ERR_CONNECTION_REFUSED and Error: Network Error" error in Reactjs,Django,Django Rest Frame work project如何修复 Reactjs、Django、Django Rest Frame 工作项目中的“net::ERR_CONNECTION_REFUSED 和错误：网络错误”错误
【发布时间】：2019-06-13 05:01:27
【问题描述】：

我正在尝试通过 django rest api 通过 post 方法将 reactjs 中的数据传递到 django，但出现了这个问题。我已经通过 Django-REST Api GUI 测试了 post 方法。它运行良好。

我的 Reactjs 组件代码：

从“反应”中导入反应，{组件} 导入'./Register.css'；从'axios'导入axios

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

常量初始状态 = { 用户名： ''，电子邮件： ''，密码： '' }

类注册扩展组件{

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>

    );

}

}

导出默认寄存器；

【问题讨论】：

因为你的请求是一个 POST，你需要检查你发送 csrf 令牌的方式，你可以开始检查文档：django-rest-framework.org/topics/ajax-csrf-cors

标签： django reactjs django-rest-framework

【解决方案1】：

错误是服务器连接错误。确保您已正确运行您的服务器。

检查您的 IP 地址是否正确
当您以调试/测试模式运行 Django 服务器时。使用 python manage.py runserver 0.0.0.0:8000 运行您的服务器，这里 8000 是端口号。

【讨论】：