Redux-Toolkit createAsyncThunk的axios登录请求未发送被拒排查

核心故障表现 #

前端通过axios发起登录请求时，请求未抵达Django后端就被直接拒绝，代码执行到请求阶段即中断。 #

第一优先级排查：网络与系统拦截问题（90%同类故障根因） #

这类问题会导致请求根本无法发出，axios不会返回response字段，你现有代码的错误捕获逻辑会直接吞掉报错信息，表现为请求无响应。

• 本地服务地址配置错误
  你当前写死的请求地址http://127.0.0.1:8000指向的是当前运行环境的本地回环地址：
  • React Native运行在Android模拟器时，127.0.0.1指向模拟器本身，要访问电脑本地的Django服务需替换为http://10.0.2.2:8000
  • 真机调试时，127.0.0.1指向手机本身，需替换为你电脑在当前局域网的IPv4地址（例如http://192.168.2.15:8000），同时保证手机与电脑连接同一WiFi
  • 无论用模拟器还是真机，Django启动时不能默认绑定127.0.0.1，要执行命令python manage.py runserver 0.0.0.0:8000，允许局域网内设备访问
• 系统明文HTTP请求拦截
  Android 9+、iOS默认禁止应用发起未加密的HTTP明文请求，你当前用的http协议地址会被系统层直接拦截：
  • Android端：打开项目下android/app/src/main/AndroidManifest.xml，在<application>标签添加属性android:usesCleartextTraffic="true"，允许明文流量
  • iOS端：打开项目下ios/[你的项目名]/Info.plist，添加App Transport Security例外配置，允许本地开发地址的HTTP请求
• Django侧访问限制
  确认Django的ALLOWED_HOSTS配置里已经添加了你使用的前端访问地址（比如10.0.2.2、你的局域网IP），否则请求会被Django直接返回400错误。

第二优先级排查：代码逻辑缺陷 #

• 错误捕获逻辑缺失导致报错被吞
  现有catch块只读取error.response?.data，但网络层拦截、地址不通这类错误不会返回response字段，会直接拿到undefined，无法定位问题。修改login thunk的错误处理逻辑：

catch(error){
  // 打印完整错误对象快速定位根因
  console.log('axios请求错误详情：', error)
  const errMsg = error.response?.data?.message || error.message || '请求失败，请检查网络'
  return thunkApi.rejectWithValue(errMsg)
}

• 状态更新逻辑错误
  现有login.rejected回调里错误将isSuccess设为true，会导致请求失败时状态判断完全错乱，修正为：

builder.addCase(login.rejected, (state, action) => {
  state.isLoading = false
  state.isSuccess = false // 原代码此处写为true，属于逻辑错误
  state.isError = true // 原代码未更新错误状态
  state.userInfo = null
  state.message = action.payload
})

• 跨域配置缺失
  如果请求抵达Django但被跨域策略拦截，需要安装django-cors-headers包，在Django配置里添加前端来源到CORS允许列表，同时正确注册中间件。

快速验证步骤 #

1. 先在电脑浏览器直接访问http://127.0.0.1:8000/api/users/login/，确认Django服务正常、接口路径正确
2. 按上述规则修改请求地址，启动Django时绑定0.0.0.0地址
3. 开启RN调试控制台，触发登录请求，查看打印的完整错误信息，对应上述场景逐一排查
4. 确认Android/iOS的明文流量权限已经开启

内容的提问来源于stack exchange，提问作者luigi-riva