S3签名的网址不适用于ajax

Posted 2023-03-04

【中文标题】S3签名的网址不适用于ajax

【英文标题】：S3 signed url not working with ajax

【发布时间】：2018-06-24 19:25:10

【问题描述】：

我正在尝试使用预签名 URL 将文件直接上传到 S3，但无法正常工作，检查了所有相关帖子，但找不到任何解决方案。我能够在另一个项目中通过 Angular 上传，下面的代码正在运行。

const req = new HttpRequest('PUT', preSignedUrl, file, 
    reportProgress: true
);

$this._http.request(req).subscribe(e => 
    if (e.type === HttpEventType.UploadProgress) 
        ...
     else if (e instanceof HttpResponse) 
        ...
    
)

但是，现在我正在尝试使用 Ajax 获得相同的输出，但我得到了 403 Forbidden。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这是不工作的代码：

$.ajax(
    type: 'PUT',
    url: preSignedUrl,
    // Content type must much with the parameter you signed your URL with
    headers: 
        "Content-Type": file.type,
        'x-amz-acl': 'public-read'
    ,
    // this flag is important, if not set, it will try to send data as a form
    processData: false,
    // the actual file is sent raw
    data: file
)
    .success(function () 
        alert('File uploaded');
    )
    .error(function () 
        alert('File NOT uploaded');
        console.log(arguments);
    );

请帮忙

【问题讨论】：

您是否尝试在您的 ajax 配置对象中将 crossDomain 作为 true 传递？它应该在那之后工作。

【参考方案1】：

请查看：Upload a file with $.ajax to AWS S3 with a pre-signed url

 $.ajax(
      type: 'PUT',
      url: "<YOUR_PRE_SIGNED_UPLOAD_URL_HERE>",
      // Content type must much with the parameter you signed your URL with
      contentType: 'binary/octet-stream',
      // this flag is important, if not set, it will try to send data as a form
      processData: false,
      // the actual file is sent raw
      data: theFormFile
    )
    .success(function() 
      alert('File uploaded');
    )
    .error(function() 
      alert('File NOT uploaded');
      console.log( arguments);
    );

在浏览器中配置 CORS：link

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>ETag</ExposeHeader>
  </CORSRule>
</CORSConfiguration>

【讨论】：

您会看到此链接：***.com/questions/28568794/… 或 docs.aws.amazon.com/AmazonS3/latest/dev/cors.html 用于在浏览器中启用 cors。

我使用的是预签名的 url，服务器配置正确，因为我仍然可以通过 angular 上传

你错过了<AllowedMethod>PUT</AllowedMethod>。我正在编辑以添加它。