CODEWITHSUNDEEP
javascriptamazon-web-servicesamazon-s3corsdropzone.js
Programmer Unextraordinair
Programmer Unextraordinair

Reputation: 1299

Why am I getting a 403 error when uploading to S3 from the browser?

So I've tried looking through previous answers on here and nothing seems to be working. I'm using Dropzone, which appears to make an OPTIONS request to get all the allowed CORS related information, but it doesn't seem to be returning properly

So from looking in the Chrome dev tools, I have the following Request Headers

Host: mybucket.s3.amazonaws.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: http://localhost:9010
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36
Access-Control-Request-Headers: accept, cache-control, content-type, x-requested-with
Accept: */*
Referer: http://localhost:9010/upload
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

And these are the Response Headers I'm getting

HTTP/1.1 403 Forbidden
x-amz-request-id: 9BE37C4F32052EAB
x-amz-id-2: Zxg+v9AQ7G7sgMKz4P7xleUhrymyWGbBNNof8jFFsZ5n0Xw8T/mPovbMO55HZ5fL
Content-Type: application/xml
Transfer-Encoding: chunked
Date: Fri, 28 Aug 2015 18:35:26 GMT
Server: AmazonS3

According to the AWS documentation I should be getting Access-Control-Allow-Methods and Access-Control-Allow-Headers among things, but I don't seem to be.

I know my bucket is valid, and the url is valid and my CORS file in the bucket is as follows:

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

So in terms of the form data that's being sent, I have the following:

acl
key
policy
x-amx-credential
x-amz-algorithm
x-amz-date
x-amz-signature

In addition to the file data. I don't think there's anything I'm missing

Upvotes: 4

Views: 9307

Answers (3)

Programmer Unextraordinair
Programmer Unextraordinair

Reputation: 1299

Agh, it was super dumb. It seems according to the page on enabling CORS that for OPTIONS requests:

Every header listed in the request's Access-Control-Request-Headers header on the preflight request must match an AllowedHeader element.

Meaning I had to add a bunch of previously missing lines to my CORS policy

<AllowedHeader>accept</AllowedHeader>
<AllowedHeader>cache-control</AllowedHeader>
...

Upvotes: 5

sigi
sigi

Reputation: 189

If anyone struggles this, 403 can come because wrong contentType is set.

Server side:

GeneratePresignedUrlRequest rq = new GeneratePresignedUrlRequest(bucketName, objectKey);
rq.setContentType("video/*");
...

Client side:

$.ajax({
                url:upUrl,
                type: "PUT",
                data: file,
                contentType:'video/*',
                cache: false,
                processData:false,
                success: function (data) {

                }
              });

Upvotes: 0

klappy
klappy

Reputation: 46

According to the docs on enabling cors, you should be able to simply use * so you don't have to list them all:

<AllowedHeader>*</AllowedHeader>

Upvotes: 2

Related Questions