Axios请求报错ERR_NETWORK/ERR_EMPTY_RESPONSE：长耗时Patch首次失败问题

可能的原因及对应解决方案 #

1. 服务器端超时配置不匹配 #

后端处理耗时30-40秒，但服务器反向代理（如Nginx）或应用框架的超时设置可能短于这个时间，导致首次请求时服务器提前断开连接，前端收到空响应；第二次请求时后端可能有缓存/预热，耗时缩短，因此能正常返回。

• 调整反向代理超时：比如Nginx的proxy_connect_timeout、proxy_read_timeout设置为60秒以上，覆盖后端处理时长。
• 调整后端应用超时：比如Django的WSGI超时、Spring的server.connection-timeout，确保配置值大于40秒。

2. 完善Axios请求配置 #

虽已设置timeout: 60000，但部分场景下需补充配置以适配长连接：

export const updateVideo = async (payload: any, id: string) => {
  try {
    const { data } = await axios.patch(
      `url/video_metadata/${id}/`,
      payload,
      { 
        timeout: 60000,
        withCredentials: true, // 跨域/会话场景下维持连接
        headers: {
          'Connection': 'keep-alive' // 显式声明长连接
        }
      }
    );
    return data;
  } catch (err) {
    console.error(err);
    toastErr(err);
  }
};

3. 针对性重试（临时兜底） #

若暂时无法修改服务器配置，可针对特定错误添加重试逻辑（需确保接口幂等，避免重复处理）：

export const updateVideo = async (payload: any, id: string, retryCount = 0) => {
  try {
    const { data } = await axios.patch(
      `url/video_metadata/${id}/`,
      payload,
      { timeout: 60000 }
    );
    return data;
  } catch (err) {
    console.error(err);
    // 仅对ERR_NETWORK/ERR_EMPTY_RESPONSE重试1次
    if ((err.code === 'ERR_NETWORK' || err.code === 'ERR_EMPTY_RESPONSE') && retryCount < 1) {
      return updateVideo(payload, id, retryCount + 1);
    }
    toastErr(err);
  }
};

4. 异步化处理（长期最优方案） #

长同步请求本身易触发连接问题，建议改成异步模式：

• 前端发送Patch后，后端立即返回202 Accepted，告知请求已接收并启动处理。
• 后端完成处理后，通过WebSocket推送或前端轮询状态接口获取结果。
• 前端收到202响应后，切换到状态等待逻辑，避免长时间挂起请求。

5. 排查网络中间设备 #

检查前端网络是否存在防火墙、代理服务器，这类设备可能主动断开长时间无响应的连接。可测试直接连接服务器IP，排除中间设备干扰。

内容的提问来源于stack exchange，提问作者john-weak