403 запрещено - выгрузить файл в корзину Amazon S3, используя Angularjs с предварительно подписанным URL

Question

Я пытаюсь загрузить изображение / музыкальный файл, используя 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);
        });

Answer 1

Таким образом, тема, касающаяся проблемы, с которой вы сталкиваетесь, называется CORS, Cross-Origina Resource Sharing.Это хорошая безопасность со стороны 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>