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

Question

这是我当前通过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术语中的多部分），我不知道如何通过CloudFront（只有S3的文档）来完成它。

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

它发送了一个预飞行请求(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请求返回403biabled并带有以下响应头：

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

Answer 1

不幸的是Cloudfront不用于上传，您需要通过S3路径或预签名URL上传文件。