如何使用 Angular 或 javascript 中的预签名 url 将文件上传到 S3 存储桶答案

【问题标题】：how to upload file to S3 bucket using pre-signed url in angular or javascript如何使用 Angular 或 javascript 中的预签名 url 将文件上传到 S3 存储桶
【发布时间】：2020-08-31 08:27:06
【问题描述】：

任何人都可以提供如何使用预签名 url 上传到 s3 存储桶的示例。我能够生成预签名的 url，但使用 PUT 动词我无法上传到 S3，出现以下错误：

从源“http://localhost:2020”访问“https://s3-bulk-files-upload.s3.ap-south-1.amazonaws.com/File1.txt?X-Amz-Expires=599&x-amz-security-token=IQoJb3JpZ2luX2VjEDAaCXVzLWVh....”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否“访问控制允许-请求的资源上存在 Origin' 标头。

谢谢， Raj4ms

【问题讨论】：

您能否提供有关您如何尝试上传到 S3 的更多详细信息？代码 sn-p 会很有帮助，并且知道您使用什么库来与 AWS 交互（如果有的话）。
另外，你看过AWS's S3 CORS config documentation吗？你有可能遇到this issue吗？
Header : httpOptions = { headers: new HttpHeaders ({ 'Content-Type': 'application/octet-stream', 'Access-Control-Allow-Origin': '*', 'Access- Control-Allow-Methods': 'GET,PUT,POST,DELETE' }) }
upload(uploadFileObject: any, url: any) { return this._http.post(url, uploadFileObject, this.httpOptions); }
文件上传到 S3 使用预先设置的 url 可以从控制台应用程序工作，但不能从 Angular 应用程序工作，尝试 PUT 和 POST 但得到相同的错误：POST s3-bulk-files-upload.s3.amazonaws.com/… 403 (Forbidden)

标签： javascript angular amazon-s3

【解决方案1】：

通过从 aws-sdk javascript 生成 presinged url 并使用 PUT 操作上传文件、签名 URL 并添加如下标题来解决此问题：new HttpHeaders({ 'x-amz-server-side-encryption': 'aws:kms', 'x-amz-server-side-encryption-aws-kms-key-id': 'arn:aws:kms:us-east-1:...' })
因为 S3 存储桶配置了 KMS 加密。

【讨论】：