Vue.js+Axios对接Django时POST请求出现net::ERR_CONNECTION_REFUSED错误的解决

一、请求失败的排查与解决 #

从你提供的代码来看，请求失败大概率是以下几个原因导致的，逐一排查修复：

1. CORS配置错误 #

你的Django配置里CORS_ALLOWED_ORIGINS存在两个问题：

• http://127.0.0.1:8000/末尾多了斜杠，会导致匹配失败
• 缺少前端Vue的运行地址（通常Vue默认跑在8080端口，若你修改过端口则对应调整）

修正后的settings.py配置：

CORS_ALLOWED_ORIGINS = [
    'http://localhost:8000',
    'http://127.0.0.1:8000',
    'http://localhost:8080',  # 新增：Vue默认前端地址
    'http://127.0.0.1:8080'   # 新增：Vue默认前端地址
]

2. Axios请求路径错误 #

你用的是相对路径/api/v1/users，如果前端和后端不在同一端口，这个路径会指向前端服务而非Django后端。需要给Axios配置全局基地址，或者直接写完整请求路径：

// 方法1：配置全局基地址（在Vue项目入口文件或当前组件里添加）
axios.defaults.baseURL = 'http://localhost:8000';

// 方法2：直接写完整路径
axios.post('http://localhost:8000/api/v1/users', formData)

3. Django CSRF令牌缺失 #

Django默认开启CSRF保护，前端Axios需要携带CSRF令牌才能发起POST请求。在组件里添加令牌获取逻辑：

// 在发送请求前获取CSRF令牌
const csrfToken = document.cookie.split('; ')
  .find(row => row.startsWith('csrftoken='))?.split('=')[1];
axios.defaults.headers.common['X-CSRFToken'] = csrfToken;

4. 错误处理逻辑拼写错误 #

你的catch分支里error.massege是拼写错误，应为error.message，这会导致无法捕获非响应类错误，修正后：

.catch(error => {
  if (error.response) {
    for (const property in error.response.data) {
      this.errors.push(`${property}: ${error.response.data[property]}`)
    }
    console.log(JSON.stringify(error.response.data));
  } else if (error.message) { // 修正拼写
    this.errors.push('Something went wrong, Please try again!')
    console.log(JSON.stringify(error));
  }
})

5. 后端路由/视图验证 #

确认Django的urls.py里已配置/api/v1/users的POST路由，且视图类/函数允许POST请求，序列化器字段与前端传参一致（username、password、email）。

二、"response已定义但未使用"提示的优化处理 #

你当前用return response来消除提示，但更优雅的方式是不接收不需要的参数，直接用下划线占位或者省略参数：

// 方式1：用下划线占位表示不需要该参数
.then(_ => {
  this.$router.push('/Log-in')
})

// 方式2：直接省略参数（如果不需要任何回调参数）
.then(() => {
  this.$router.push('/Log-in')
})

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