javascript 如何通过CloudFront实现多部分上传?

dzhpxtsq  于 2023-09-29  发布在  Java
关注(0)|答案(3)|浏览(90)

这是我目前通过CloudFront成功上传文件到S3的代码

let fileObject = thisUploader.getFile(id); //returns File API
let reader = new FileReader(); //using the FileReader API to read files
reader.onload = function () {                                      
	$.ajax({
		url: 'http://sampleId.cloudfront.net/video.mp4?Policy=examplePolicy&Signature=exampleSignature&Key-Pair-Id=exampleKey',
		type: 'PUT',
		contentType: fileObject.type,
		data: reader.result,
		processData: false,
		crossDomain: true
	});
}
reader.readAsArrayBuffer(fileObject);

现在对于分块上传(或AWS术语中的multipart),我不知道如何通过CloudFront完成(只有S3的文档)。

所以我的问题是通过CloudFront实现多部分上传所需的所有步骤是什么?
**尝试情况:**我在CloudFront控制台中开启了Forward Query Strings选项,并将参数uploads加入白名单。我尝试了S3的指南,并测试了启动多部分上传的代码(注意添加的uploads参数):

$.ajax({
    url: 'http://sampleId.cloudfront.net/video.mp4'+'?uploads'+'&Policy=examplePolicy&Signature=exampleSignature&Key-Pair-Id=exampleKey',
    type: 'POST',
    contentType: 'application/json'
});

它发送了一个preflight请求(OPTIONS),并返回200 OK,其中包含以下响应头:

Access-Control-Allow-Headers: content-type
Access-Control-Allow-Methods: GET, PUT, HEAD, POST
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3000
Connection: keep-alive
Content-Length: 0
Date: Thu, 02 Aug 2018 07:03:01 GMT
Server: AmazonS3
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Via: 1.1 7111a943ba8327e4a6723f271fc9f7c4.cloudfront.net (CloudFront)
X-Amz-Cf-Id: oeE4D7FM8TyxE7NtmVidbyADGLqvwOnc49XdI1ps-tHIUKXrdm2PGg==
X-Cache: Miss from cloudfront

但真实的的POST请求返回403 Forbidden,并带有以下响应头:

Accept-Ranges: none
Access-Control-Allow-Methods: GET, PUT, HEAD, POST
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 3000
Age: 13976
Connection: keep-alive
Content-Length: 445
Content-Type: text/html
Date: Thu, 02 Aug 2018 03:10:05 GMT
ETag: "07468170dde4c34c5990eee2d1c2ae1e"
Last-Modified: Wed, 01 Aug 2018 08:34:47 GMT
Server: AmazonS3
Via: 1.1 7111a943ba8327e4a6723f271fc9f7c4.cloudfront.net (CloudFront)
X-Amz-Cf-Id: EWPPWw0l9BTmhFFe39HWdUuCp2Ab2L3yE5bj9wEqFvl3mVbNmt28Pg==
x-amz-replication-status: FAILED
x-amz-version-id: yLhhgPevn2eeofp7kEmcvixP3iW.vj7S
X-Cache: Error from cloudfront
qkf9rpyu

qkf9rpyu1#

不幸的是,Cloudfront不支持上传,您需要通过S3路径或预签名URL上传文件。

iugsix8n

iugsix8n2#

最后,我必须关闭Cloudfront的Restrict Viewer Access选项。它似乎不能很好地与Multipart Upload一起使用,或者当它打开时查询字符串param forward不能正常工作。

oxalkeyp

oxalkeyp3#

此问题可能是由CloudFront中的WAF规则引起的。我也是这样的,下面是我的解决方案,希望能对你有所帮助。
在AWS WAF中,有一个名为AWS-AWSManagedRulesCommonRuleSet的规则集,其中包含一个名为SizeRestrictions_BODY的规则。这个规则限制了content-length的大小。如果您将此规则覆盖为“允许",则问题将得到解决。

相关问题