CODEWITHSUNDEEP
angularjsamazon-s3file-upload
user3194721
user3194721

Reputation: 815

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

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

Upvotes: 0

Views: 1014

Answers (1)

Daniel
Daniel

Reputation: 15393

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>

Upvotes: 2

Related Questions