使用AWS预签名URL请求文件时出现CORS错误

1. 先处理CloudFront的OPTIONS预检请求支持 #

浏览器发送跨域请求前会先发起OPTIONS预检请求，CloudFront默认可能不会转发这类请求到S3，导致预检失败：

• 登录CloudFront控制台，找到目标分发，进入行为标签页
• 编辑对应行为，在「允许的HTTP方法」中勾选OPTIONS
• 在「缓存键和源请求」配置里，确保OPTIONS请求会被转发到S3（不要被CloudFront拦截缓存）

2. 配置CloudFront响应头策略传递CORS头 #

即使S3返回CORS头，CloudFront可能会覆盖或不传递这些头，需要创建专属响应头策略：

• 进入CloudFront控制台的响应头策略页面，新建策略
• 在CORS配置区域：
  • 允许的源：填写你的Angular应用域名（测试阶段可用*，生产环境建议指定具体域名）
  • 允许的方法：勾选GET等你需要的请求方法
  • 允许的头：必须包含Authorization（因为你的请求携带了这个自定义头）
  • 暴露的头：保持和S3配置一致，或添加业务需要的响应头
• 将该策略关联到CloudFront的目标行为上

3. 修正Angular请求代码 #

当前代码缺少令牌携带，且未正确设置响应类型，导致请求不符合要求：

import { HttpHeaders } from '@angular/common/http';

public downloadFile(downloadLink: string, authToken: string) {
  const headers = new HttpHeaders({
    'Authorization': `${authToken}` // 替换为你的令牌格式，比如Bearer xxx
  });

  return this.http.get(downloadLink, {
    headers,
    responseType: 'blob' // 必须指定blob类型，否则无法正确解析文件内容
  }).pipe(
    map((response: Blob) => {
      const blob = new Blob([response], { type: 'text/csv' });
      const url = window.URL.createObjectURL(blob);
      
      // 用a标签触发下载，比window.open更稳定
      const downloadLink = document.createElement('a');
      downloadLink.href = url;
      downloadLink.download = 'exported-file.csv';
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      // 清理资源
      window.URL.revokeObjectURL(url);
      document.body.removeChild(downloadLink);
    })
  );
}

4. 检查CloudFront函数的CORS兼容性 #

你部署的令牌解码函数，需要确保不会干扰CORS响应：

• 查看函数代码，若处理OPTIONS请求，需直接返回符合要求的CORS响应头，或直接转发请求到S3，不要拦截修改
• 确保函数不会移除或篡改S3/CloudFront返回的Access-Control-Allow-Origin等CORS相关头

5. 用浏览器开发者工具验证预检请求 #

打开浏览器DevTools的Network标签，查看OPTIONS请求的响应：

• 确认响应头包含Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers（且后者包含Authorization）
• 若这些头缺失，说明CloudFront或S3的配置仍有问题

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