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

Posted 2023-02-19

【中文标题】如何修复 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

【发布时间】：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

【参考方案1】：

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

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