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

回答1:

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

回答2:

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>

回答3:

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) {

                }
              });

来源：https://stackoverflow.com/questions/32277885/why-am-i-getting-a-403-error-when-uploading-to-s3-from-the-browser