如何解决React+Django+DRF项目中的net::ERR_CONNECTION_REFUSED及网络错误

我看你已经确认Django REST的POST接口通过GUI测试是正常的，但React这边调用时出现了连接拒绝的问题，咱们来一步步排查和解决：

1. 先修正请求URL的空格问题 #

你的REGISTER_URL前后有多余的空格：

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

这些空格会导致axios解析的请求地址出错，直接去掉前后空格：

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

2. 配置Django的跨域支持（关键！） #

React默认运行在3000端口，Django在8000端口，属于不同域名，浏览器会因为同源策略拦截跨域请求，这是最常见的原因之一。你需要给Django添加跨域支持：

• 首先安装django-cors-headers：

  pip install django-cors-headers
  

• 然后修改Django项目的settings.py：

  # 在INSTALLED_APPS里添加
  INSTALLED_APPS = [
      ...
      'corsheaders',
      ...
  ]
  
  # 在MIDDLEWARE里添加（注意顺序，要放在CommonMiddleware之前）
  MIDDLEWARE = [
      ...
      'corsheaders.middleware.CorsMiddleware',
      'django.middleware.common.CommonMiddleware',
      ...
  ]
  
  # 开发环境可以先允许所有来源（生产环境请指定具体域名）
  CORS_ALLOW_ALL_ORIGINS = True
  

修改后重启Django服务。

3. 修正表单输入的value绑定错误 #

你的用户名输入框里，value绑定的是this.state.name，但你的state字段是username，这会导致输入的用户名无法被正确捕获（虽然这不是连接拒绝的原因，但会导致后续接口请求数据异常）：

// 原来的错误代码
<input className = "from-control ml-4" type="text" placeholder = ' Enter Your Name ' name = "username" id = "username" value = {this.state.name} onChange = {this.changeHandler} />

// 修正后
<input className = "from-control ml-4" type="text" placeholder = ' Enter Your Name ' name = "username" id = "username" value = {this.state.username} onChange = {this.changeHandler} />

4. 确认服务运行状态 #

最后检查：

• Django服务确实在127.0.0.1:8000正常运行
• React服务在3000端口正常运行，没有端口冲突或服务中断的情况

完成以上步骤后，重启React和Django服务，再测试POST请求应该就能正常连接了。

内容的提问来源于stack exchange，提问作者Jabir_Hstu