Angular 15从AWS S3 URL下载文件遭遇CORS错误求助

问题背景 #

在Vue2项目中通过JS正常实现AWS S3文件下载，迁移到Angular 15后，使用HttpClient或fetch API均触发CORS错误，但Chrome不安全模式下可正常运行；且Angular请求在控制台网络面板中不显示请求头。当前AWS S3 CORS配置如下：

AWS S3 CORS配置

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Content-Range",
            "Content-Length",
            "ETag"
        ],
        "MaxAgeSeconds": 3000
    }
]

当前Angular实现代码

export class DownloadControllerService {
  constructor(
    private httpClient: HttpClient
  ) {}

  getBlobFile(url: string): Observable<Blob> {
    return this.httpClient.get<any>(url, {
      responseType: 'blob' as 'json',
    });
  }
}

解决思路 #

1. 修正Angular HttpClient的responseType配置 #

当前代码中responseType: 'blob' as 'json'的类型断言错误，会导致请求的Accept头不符合预期，甚至触发不必要的预请求。正确写法应为：

getBlobFile(url: string): Observable<Blob> {
  return this.httpClient.get(url, {
    responseType: 'blob' as const, // 或直接写responseType: 'blob'
  });
}

2. 排查HTTP拦截器对请求的影响 #

如果项目中配置了HTTP拦截器，可能会自动添加自定义请求头（如Authorization、X-Requested-With等），这类头会触发浏览器的OPTIONS预请求。即使S3配置了AllowedHeaders: "*"，部分场景下仍可能出现预请求失败：

• 临时移除拦截器测试是否恢复正常
• 在拦截器中添加逻辑，对S3的请求URL跳过自定义头的添加

3. 改用a标签直接下载绕过CORS检查 #

对于公开可访问的S3文件，无需通过AJAX请求获取Blob，直接通过创建a标签触发浏览器原生下载行为，完全绕开CORS限制：

downloadFile(url: string, filename: string): void {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename; // 指定下载后的文件名
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

4. 验证S3桶的权限与静态托管配置 #

• 确认目标文件的权限为公开可读，或使用的签名URL有效且未过期
• 检查S3桶是否启用了静态网站托管，确保访问路径正确

5. 清除浏览器CORS缓存 #

浏览器会缓存OPTIONS预请求的结果，可能导致旧的CORS配置影响当前请求。尝试清除浏览器缓存，或使用常规隐身模式（非不安全模式）重新测试。

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