Angular中带JWT令牌的REST文件下载请求遇访问拒绝问题

你遇到的核心问题很明确：通过新标签页发起下载请求时，无法自动携带JWT令牌，而Postman能正常工作是因为你手动配置了Authorization请求头。之前无JWT认证时正常，是因为接口不需要权限校验，新标签页直接访问就能获取文件。

下面是针对性的修复方案，我们会修改请求逻辑，不再依赖新标签页，而是通过Angular HttpClient获取文件Blob后手动触发下载：

步骤1：修改HTTP请求，正确携带JWT并指定响应类型 #

首先要在请求中明确设置响应类型为blob，同时把JWT令牌放入Authorization请求头：

downloadCSV(id: string) {
  const downloadLink = `${this.baseUrl}csvfiles/${id}`;
  const token = localStorage.getItem("token");
  
  // 构造带JWT的请求头
  const headers = new HttpHeaders().set('Authorization', `Bearer ${token}`);
  
  this.http.get(downloadLink, { headers, responseType: 'blob' })
    .pipe(
      catchError(this.handleError('downloadCSV catchError: ', downloadLink))
    )
    .subscribe((blob: Blob) => {
      // 获取Blob后触发下载流程
      this.triggerFileDownload(blob, `csv-file-${id}.csv`);
    });
}

步骤2：添加手动触发下载的辅助函数 #

新增一个函数来处理Blob的下载逻辑，通过创建临时<a>标签触发浏览器下载，完全避开新标签页的上下文问题：

private triggerFileDownload(blob: Blob, fileName: string) {
  // 创建Blob临时URL
  const url = window.URL.createObjectURL(blob);
  const downloadAnchor = document.createElement('a');
  
  downloadAnchor.href = url;
  downloadAnchor.download = fileName; // 设置下载后的文件名
  document.body.appendChild(downloadAnchor);
  
  // 触发点击事件启动下载
  downloadAnchor.click();
  
  // 清理临时资源
  document.body.removeChild(downloadAnchor);
  window.URL.revokeObjectURL(url);
}

为什么原方式会失败？ #

当通过新标签页发起请求时，浏览器会创建一个全新的独立上下文，这个上下文不会自动读取原页面localStorage里的JWT令牌，也不会继承原页面的请求头配置。而Postman是你手动在请求中添加了Authorization: Bearer <token>，所以能顺利通过Spring Boot的JWT认证拦截。

改用Blob下载的方式后，请求是在当前页面的上下文发起的，我们可以手动控制请求头带上JWT，同时通过<a>标签触发下载，既满足了权限校验要求，又能正常完成文件下载。

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