禁止使用403-使用带有预签名URL的Angularjs将文件上传到Amazon S3存储桶

时间:2019-05-22 18:00:42

标签: angularjs amazon-s3 file-upload

我正在尝试使用presigned-url上传图像/音乐文件。但是我收到403禁止错误。我已经使用下面的文档实现了。

http://www.cheynewallace.com/uploading-to-s3-with-angularjs-and-pre-signed-urls/

 $http.put($scope.uploadFileLocation["presigned-url-bkgd-img"],
           document.getElementById('backgroundImage').files[0],
           { headers: {
               'Content-Type': document.getElementById('backgroundImage').files[0].type }
           })
        .success(function (resp) {
          //Finally, We're done
          alert('Upload Done!' + resp);
        })
        .error(function (resp) {
          alert("An Error Occurred Attaching Your File" + resp);
        });

1 个答案:

答案 0 :(得分:0)

因此,与您面临的问题有关的主题称为CORS,即跨域资源共享。 Amazon Web Services方面的安全性很好。恶意用户可以访问您的s3存储桶以上传图像,而无需为此付费。

首先,我将检查您的应用程序是否需要用户登录,换句话说,您的应用程序是否具有用户登录后才能使用该应用程序的想法。如果是这样,那么您可能需要相应地配置项目,例如,获取要求用户登录才能执行任何操作的中间件,并将其作为自变量放入到/api/upload的路由请求中。

第二,检查您的 AmazonS3 -> my-bucket-123,然后单击权限标签。

您可能需要像这样配置它:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="https://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>

    <CORSRule>
        <AllowedOrigin>http://localhost:3000</AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>