Axios(React)对接DRF首次请求报网络错误重试成功问题排查求助

1. 最高概率原因：Azure服务冷启动 + 超时阈值设置过短 #

• 你当前Axios配置的timeout为1000ms（1秒），Azure托管服务默认开启冷启动机制：长时间无请求时服务实例会被回收，首次请求需要重新拉起实例、初始化运行环境，该过程通常耗时2~5秒，远超你设置的1秒阈值，会直接触发超时中断，抛出无响应的Network Error。
• 重试请求时服务已经完成唤醒，因此可以正常响应，完全符合你观测到的「接口需要唤醒」的特征。
• 验证方法：把timeout调整为10000（10秒）后测试，如果首次请求即可成功，即可确认该问题。
• 解决方案：
  • 合理调整接口超时阈值为5~10秒
  • 进入Azure服务配置页开启「始终开启（Always On）」选项，避免实例被自动回收

2. 存在的其他配置问题 #

2.1 Authorization头静态初始化缺陷 #

你在创建Axios实例时一次性读取localStorage的access_token，该值会被固定为实例创建时的取值，后续登录成功后更新localStorage的token不会同步到已创建的实例中，会导致后续请求携带无效的Authorization头。
修复方案：改用Axios请求拦截器动态注入Authorization头：

axiosInstance.interceptors.request.use(config => {
  const token = localStorage.getItem('access_token');
  if (token) {
    config.headers.Authorization = `JWT ${token}`;
  }
  return config;
});

2.2 token存储key不匹配 #

你登录成功后存储token的key为access token（带空格），但读取时用的key是access_token（带下划线），会导致后续读取token永远返回null，需要统一两端的key命名。

2.3 错误捕获逻辑缺陷 #

网络错误/超时场景下err.response为undefined，直接取err.response.data会抛出额外JS错误，需要先判断再取值：

.catch(err => {
  console.log('here', err);
  if (err.response) {
    const resp = err.response.data;
    // 处理业务错误
  } else {
    // 处理网络错误/超时
  }
})

内容的提问来源于stack exchange，提问作者Cl0ud-l3ss