Angular中点击HTMLAnchorElement时添加请求头实现安全大文件下载

问题分析 #

直接在URL拼接JWT令牌会导致令牌暴露在浏览器历史、服务器日志或第三方监控中，存在严重安全风险。要实现安全下载，需将JWT放在请求头的Authorization字段中，同时保留浏览器原生下载的进度提示和断点续传支持。

解决方案 #

通过Angular的HttpClient发起带JWT头的请求，获取文件Blob后生成临时下载链接，触发浏览器原生下载：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { take } from 'rxjs/operators';

// 注入HttpClient和oidcSecurityService
constructor(
  private http: HttpClient,
  private oidcSecurityService: OidcSecurityService
) {}

private downloadFile(apiPath: string): void {
  this.oidcSecurityService.getAccessToken().pipe(take(1)).subscribe((token) => {
    const headers = new HttpHeaders({
      'Authorization': `Bearer ${token}`
    });

    // 发起请求，指定responseType为blob
    this.http.get(`${this.apiEndpoint}/${apiPath}`, {
      headers,
      responseType: 'blob',
      observe: 'response' // 获取完整响应头，用于提取文件名
    }).subscribe((response) => {
      // 从响应头提取文件名（需后端配合返回Content-Disposition）
      const contentDisposition = response.headers.get('Content-Disposition');
      let filename = 'downloaded-file';
      if (contentDisposition) {
        const matches = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
        if (matches != null && matches[1]) {
          filename = decodeURIComponent(matches[1].replace(/['"]/g, ''));
        }
      }

      // 创建Blob URL
      const blob = response.body;
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = filename;
      // 触发点击下载
      document.body.appendChild(link);
      link.click();
      // 清理资源
      setTimeout(() => {
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      }, 100);
    });
  });
}

关键说明 #

• 请求头携带JWT：通过Authorization: Bearer <token>将令牌放在请求头，避免URL泄露风险。
• Blob处理大文件：responseType: 'blob'让浏览器流式处理文件，不会把整个文件加载到内存，适合超大文件。
• 提取文件名：需要后端在响应头返回Content-Disposition字段（例如：Content-Disposition: attachment; filename="large-file.zip"），前端从中解析文件名，提升用户体验。
• 资源清理：下载完成后及时销毁临时链接和Blob URL，避免内存泄漏。

后端配合要求 #

确保API支持：

1. 接受Authorization头的JWT验证。
2. 返回正确的Content-Disposition头，包含文件名。
3. 支持流式响应（避免一次性加载文件到服务器内存）。

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