Angular-Ionic从AWS存储库下载图片遇403错误及下载方法咨询

1. 403(Forbidden)错误的原因 #

最常见的原因是AWS S3存储桶的CORS配置未允许你的Angular-Ionic应用域名。浏览器出于同源策略限制，加载跨域资源（比如你的S3图片）前会发起OPTIONS预检请求，如果S3桶没配置允许你的应用源地址，就会返回403错误。而Postman作为独立客户端工具，不受浏览器同源策略约束，所以能正常访问该URL。

额外排查点：

• 确认这个S3 URL是否是临时签名URL，如果是，检查是否已过期（不过你提到Postman能正常访问，这个可能性较低）。
• 检查S3对象权限，确保它允许公开读取，或者签名URL包含了正确的GET权限。

2. 实现图片下载的方法 #

根据你的场景，有几种可行方案：

方案一：配置S3 CORS并直接用HTML触发下载

先修复CORS问题让图片正常加载，同时实现下载：

1. 配置S3 CORS规则：
   登录AWS控制台，找到目标S3桶，进入「权限」→「跨域资源共享(CORS)」，添加以下规则（替换为你的应用实际域名）：

   [
       {
           "AllowedHeaders": ["*"],
           "AllowedMethods": ["GET"],
           "AllowedOrigins": ["http://localhost:8100", "https://your-production-domain.com"],
           "ExposeHeaders": []
       }
   ]
   

   其中AllowedMethods需包含GET（加载图片的请求方法），AllowedOrigins指定你的应用域名，本地开发通常是http://localhost:8100。

2. 修改Angular代码实现下载：
   更新clinic-test.page.ts中的getClinicTestFile方法，拿到URL后创建临时a标签触发下载：

   getClinicTestFile() {
     this.clinicTestService.getClinicTestFile().subscribe(
       clinicTestFileUrl => {
         this.clinicTestFileUrl = clinicTestFileUrl;
         // 创建下载链接并触发点击
         const downloadLink = document.createElement('a');
         downloadLink.href = clinicTestFileUrl;
         downloadLink.download = 'clinic-test-image.jpg'; // 自定义下载文件名
         downloadLink.target = '_blank';
         document.body.appendChild(downloadLink);
         downloadLink.click();
         document.body.removeChild(downloadLink);
       }
     );
   }
   

方案二：通过Laravel后端代理下载（无需配置S3 CORS）

如果不想修改S3的CORS配置，或者S3对象是私有的，可以让后端作为中转，先从S3获取文件再返回给前端：

1. Laravel后端添加路由和处理逻辑：

   use Illuminate\Support\Facades\Storage;
   use Illuminate\Http\Response;
   
   Route::get('/api/clinic-test/download', function () {
       // 可根据实际需求从请求参数获取S3文件路径
       $s3FileKey = 'aATecub3Epkwu1AcDGVgHIcWi1SrZCW9wkYtkTJU';
       $fileContent = Storage::disk('s3')->get($s3FileKey);
       $fileName = 'clinic-test-image.jpg';
   
       return response($fileContent, Response::HTTP_OK)
           ->header('Content-Type', 'image/jpeg')
           ->header('Content-Disposition', "attachment; filename=\"{$fileName}\"");
   });
   

2. 修改Angular服务和页面代码：
   更新clinic-test.service.ts的getClinicTestFile方法：

   getClinicTestFile() {
     return this.httpClient.get(`${this.baseUrl}/api/clinic-test/download`, {responseType: 'blob'});
   }
   

   然后在页面中处理Blob并触发下载：

   getClinicTestFile() {
     this.clinicTestService.getClinicTestFile().subscribe(
       (blob: Blob) => {
         const fileUrl = window.URL.createObjectURL(blob);
         const downloadLink = document.createElement('a');
         downloadLink.href = fileUrl;
         downloadLink.download = 'clinic-test-image.jpg';
         downloadLink.click();
         // 释放临时URL资源
         window.URL.revokeObjectURL(fileUrl);
       }
     );
   }
   

方案三：确保S3签名URL的有效性（如果使用临时签名）

如果你的S3 URL是后端生成的临时签名URL，要确保：

• 签名时指定了GET权限
• 过期时间设置合理（不要太短）
• 生成签名的AWS凭证有访问该S3对象的权限

内容的提问来源于stack exchange，提问作者Ber Tsacianegu del Tepuy