Angular调用带认证的Spring Boot REST API返回的下载链接仍要求鉴权

问题根因 #

你当前的实现存在本质逻辑漏洞：调用获取下载地址的接口时，确实是通过Angular HttpClient手动携带了Basic认证头完成身份校验，但后续通过a标签触发下载时，是浏览器原生发起的GET请求，该请求默认不会自动携带你在HttpClient中配置的Authorization头，因此会触发身份认证弹窗。你首次输入凭证后，浏览器会缓存当前站点的Basic认证信息，后续同站点请求都会自动携带该凭证，因此不会再弹窗。

解决方案 #

方案1：后端接口直接返回文件流，前端处理流下载（最推荐） #

不需要后端返回独立的下载链接，直接让原接口响应文件二进制流，全程通过带认证头的HttpClient请求，避免二次请求丢失认证信息。

后端调整（Spring Boot）

接口返回ResponseEntity<byte[]>，设置正确的Content-Type和Content-Disposition头即可。

前端service代码调整

public getLogs(data):Observable<any>{
  const url = 'http://<localhost>:<port>/<path>'
  return this.http.get(url, {
    headers: new HttpHeaders({ 'Authorization': 'Basic ' + btoa('test:test') }), 
    responseType: 'blob', // 指定响应类型为二进制流
    observe: 'response'
  });
}

前端下载逻辑调整

constructor(private api: ApiService) {}
this.api.getLogs(param).subscribe(result =>{
  if (result.status == 200) {
    // 从响应头提取文件名，也可以自定义
    const contentDisposition = result.headers.get('Content-Disposition');
    const fileName = contentDisposition ? contentDisposition.split('filename=')[1].replace(/"/g, '') : 'logs.zip';
    // 生成临时下载地址
    const blob = new Blob([result.body], {type: result.headers.get('Content-Type')});
    const objectUrl = URL.createObjectURL(blob);
    // 触发下载
    const a = document.createElement('a') as HTMLAnchorElement;
    a.href = objectUrl;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    // 释放临时URL内存
    URL.revokeObjectURL(objectUrl);
  } else {
    console.log('failed');
  }
});

方案2：下载链接拼接Basic认证信息（仅推荐内部系统临时使用） #

Basic认证支持将凭证直接拼接在URL中，格式为http://用户名:密码@域名/路径，这样浏览器发起请求时会自动识别携带认证信息，但是该方式存在安全风险：凭证会明文暴露在浏览器历史记录、服务器日志中，不适合对外公开的系统。
调整下载逻辑的代码即可：

var file_path = result['url'];
// 拼接认证信息到URL
const authUrl = file_path.replace('http://', 'http://test:test@');
let a = document.createElement('a') as HTMLAnchorElement;
a.href = authUrl;
a.download = file_path.substr(file_path.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

方案3：后端生成带签名的临时下载链接 #

后端调整下载链接生成逻辑，给每个下载链接追加一个有效期内有效的签名参数，下载接口优先校验签名参数，校验通过则不需要再校验Basic认证头，安全性更高，适合生产环境使用。

原有代码可优化点 #

• 你创建a标签时的类型声明错误，应该是HTMLAnchorElement而非HTMLInputElement
• 不需要引入jQuery操作a标签的属性，原生JS完全可以实现相同功能，减少不必要的依赖

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