403 forbidden - Upload file to Amazon S3 bucket using Angularjs with pre signed URL

Question

I'm trying to upload image/music file using presigned-url. But I'm getting 403 forbidden error. I've implemented using below document.

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);
        });

Daniel · Accepted Answer · 2019-06-05 21:35:04Z

So the topic regarding the issue you are facing is called CORS, Cross-Origina Resource Sharing. This is good security on the part of Amazon Web Services. A malicious user could get access to your s3 bucket for uploading images without having to pay for it.

First, I would check if your application requires a user to be logged in, in other words does your application have the idea of a user logging in to use the application in general. If so, then you probably need to configure your project accordingly, for example grabbing that middleware that requires your user to be logged in to do anything and dropping it as an argument into your route request to /api/upload.

Second, check your AmazonS3 -> my-bucket-123 and click on the PERMISSIONS tab.

You may need to configure it like so:

<?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>

Collectives™ on Stack Overflow

403 forbidden - Upload file to Amazon S3 bucket using Angularjs with pre signed URL

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related