Java REST-API后端+AngularJS前端大文件生成时前端超时断开的解决办法

嘿，这个场景我太熟悉了——海量数据生成导致前后端连接超时，确实挺头疼的。下面给你几个经过实践验证的可行方案，你可以根据自己的系统情况选：

如果只是偶尔出现超时，而且不想大改代码，可以先试试延长前后端的超时配置：

• 前端（AngularJS）：在发起请求时显式设置超时时间，比如10分钟（600000毫秒）：

  $http.get('/api/generate-massive-file', {
      timeout: 600000 // 10分钟超时
  }).then(function(response) {
      // 处理文件下载
  }).catch(function(error) {
      // 处理超时或错误
  });
  

  注意：部分浏览器本身也有默认超时限制，不过大部分现代浏览器支持自定义较长的超时。
• 后端（Java）：调整服务器和框架的超时设置，比如Spring Boot项目：
  • 在application.properties里设置Tomcat连接超时：

    server.tomcat.connection-timeout=600000
    server.servlet.session.timeout=600000
    

  • 如果用Spring MVC的异步请求，还可以调整AsyncSupportConfigurer的超时：

    @Configuration
    public class WebConfig implements WebMvcConfigurer {
        @Override
        public void configureAsyncSupport(AsyncSupportConfigurer configurer) {
            configurer.setDefaultTimeout(600000);
        }
    }
    

这是更可靠的长期方案，核心思路是把“生成文件”和“返回结果”拆成两个独立步骤：

1. 用户发起请求后，后端立即返回一个唯一任务ID，然后在后台异步生成文件
2. 前端通过轮询、WebSocket或SSE监听任务状态，直到文件生成完成
3. 状态完成后，前端再发起下载请求获取文件

后端示例（Java + Spring） #

// 1. 接收请求，返回任务ID
@PostMapping("/api/request-massive-file")
public ResponseEntity<String> requestMassiveFile(@RequestBody DataRequest request) {
    String taskId = UUID.randomUUID().toString();
    // 提交异步任务（记得先配置@Async的线程池）
    fileGeneratorService.generateFileAsync(request, taskId);
    return ResponseEntity.ok(taskId);
}

// 2. 查询任务状态
@GetMapping("/api/task/{taskId}/status")
public ResponseEntity<TaskStatus> getTaskStatus(@PathVariable String taskId) {
    TaskStatus status = taskStatusManager.getStatus(taskId);
    return ResponseEntity.ok(status);
}

// 3. 下载生成好的文件
@GetMapping("/api/task/{taskId}/download")
public ResponseEntity<Resource> downloadFile(@PathVariable String taskId) throws IOException {
    File file = fileStorageService.getGeneratedFile(taskId);
    Resource resource = new FileSystemResource(file);
    return ResponseEntity.ok()
            .contentType(MediaType.APPLICATION_OCTET_STREAM)
            .header(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=\"" + file.getName() + "\"")
            .body(resource);
}

前端示例（AngularJS） #

// 发起文件生成请求
$http.post('/api/request-massive-file', requestParams)
.then(function(response) {
    var taskId = response.data;
    // 每5秒轮询一次任务状态
    var pollTimer = setInterval(function() {
        $http.get('/api/task/' + taskId + '/status')
        .then(function(statusResp) {
            var status = statusResp.data;
            if (status.status === 'COMPLETED') {
                clearInterval(pollTimer);
                // 跳转到下载链接，触发浏览器下载
                window.location.href = '/api/task/' + taskId + '/download';
            } else if (status.status === 'FAILED') {
                clearInterval(pollTimer);
                alert('文件生成失败，请稍后重试');
            } else {
                // 可以更新前端进度提示，比如"已完成30%"
                $scope.progress = status.progress;
            }
        });
    }, 5000);
});

如果想优化轮询的效率，可以用WebSocket或**Server-Sent Events（SSE）**让后端主动推送状态变化，避免前端频繁请求。

如果必须用同步请求，可以让后端在生成文件的过程中，定期向前端输出少量数据（比如空白字符）并刷新输出流，保持连接不被断开，同时还能传递进度信息：

• 后端（Java）：边生成边输出，定期flush：

  @GetMapping("/api/generate-massive-file")
  public void generateAndStreamFile(HttpServletResponse response) throws IOException {
      response.setContentType("application/octet-stream");
      response.setHeader("Content-Disposition", "attachment; filename=massive-data.csv");
      OutputStream out = response.getOutputStream();
      
      int totalBatches = 100; // 假设分100批生成
      for (int i = 0; i < totalBatches; i++) {
          // 生成当前批次的数据
          byte[] batchData = dataGenerator.generateBatch(i);
          out.write(batchData);
          out.flush(); // 立即输出，让前端收到数据，保持连接
          // 可选：输出进度信息（需要前端支持解析）
          // out.write(("Progress: " + (i+1)*100/totalBatches + "%\n").getBytes());
      }
      out.close();
  }
  

• 前端（AngularJS）：监听请求的进度事件：

  $http.get('/api/generate-massive-file', {
      timeout: 600000,
      eventHandlers: {
          progress: function(event) {
              if (event.lengthComputable) {
                  var percent = Math.round((event.loaded / event.total) * 100);
                  $scope.downloadProgress = percent + '%';
              }
          }
      }
  }).then(function(response) {
      // 处理下载完成
  });
  

  注意：这个方案可能受限于反向代理、CDN的缓冲策略，如果中间节点会缓存整个响应，心跳就起不到作用了。

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