AWS S3 Bucket CORS configuration: policy block despite all access

Question

I am trying to figure out how to configure an AWS S3 bucket so that I can upload to it. I followed the instructions in this tutorial, but am still getting an error that says:

Access to fetch at 'https://s3.ap-southeast-2.amazonaws.com/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have a bucket (in dev) with the following CORS policy:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

I have a bucket policy as follows:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "Statement1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],

// Note: I have also tried using the wildcard '*' to allow all actions, but i get the same error message as shown above

        "Resource": [
            "arn:aws:s3:::[MY_BUCKET_NAME]",
            "arn:aws:s3:::[MY_BUCKET_NAME]/*"
        ]
    }
]

}

I can see that the AWS policy has an additional ACL section, which has options to tick list and read, but the write button is greyed out with a warning not to use it to allow everyone to write. I ticked them to allow public access to everyone to list and read (I don't know how to edit the greyed out write option). I am in dev mode and would like to find a way to test if the connection can be made to function, so would like to write. Even when I try this, I get the same error as posted above.

I am looking for current instructions on how to connect to an AWS S3 bucket. It seems the config requirements change faster than blog tutorials are created. Many of the answers on SO no longer map to the config settings in the AWS S3 profile.

Insouciant

Do you want to allow public uploads for your bucket (anyone can upload without authentication)? This is a security risk, since if anyone figures out your bucketname (which won't be hard), they can upload any of their own objects – Theophany

For now, I'm just in development and trying to see how it works. I'll accept any security risk to understand how to configure the AWS end. I'll add policy constraints back once I can see how it works. For now, I'm stuck at the first step. – Insouciant

Answer 1

The CORS error you got should be related to the CORS configuration only, not the bucket policy.

I noticed the error message you quoted does not include the bucket name. Usually for CORS error, it should look something like this:

'https://<bucket>.s3.eu-west-2.amazonaws.com/' from origin 'https://localhost:3001' has been blocked by CORS policy

Suggest you double-check the BUCKET_NAME in your code.

Also I don't know which method you use for calling the API, but for completeness, you can also include the HEAD method.

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "POST",
            "GET",
            "PUT",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

For me, this works fine for uploading from client.

Haro

Hi - what do you mean by include the HEAD method? Is there something extra I'm supposed to add to my AWS policy to deal with that? – Insouciant

S3 supports HEAD method, which is like GET, but only returning the header without body. This is usually used to simple check if an object exists. If you are using HEAD, then need to include HEAD in the AllowedMethods list (see my CORS config). But before that, did you manage to verify the bucket name is correct? The error message you quoted looks suspicious, because the bucket name is missing from the error message. See my post too for the typical S3 CORS error message. It includes the bucket name in front like <bucket>.s3.<region>.amazonaws.com. – Haro

It's definitely my correct bucket name. I use it in an env variable that gets read into the upload method. Thanks for the head suggestion. I'll try that when I get back to my desk. – Insouciant

Ok, I mean make sure the variable is not null / undefined. Good luck! – Haro

Hello, I'm with @RegisterSole, I think your variable is empty, try to check bucket cors with cli wth this command aws s3api get-bucket-cors --bucket bucket-name. And maybe is not in AWS side but in your code call that you must check if all params/config are good. because in your url its missing the bucket name – Faris

Thank you. I'll try to figure out how to get that test working over the weekend. I can't get any response to that in my terminal, but there must be something required on my side to configure the command line tools to work with AWS - so much to learn. – Insouciant

Thank you for this. I actually hired someone on AWS IQ to help me configure this. Just in case anyone else gets stuck with this, I was a dope and did not have my IAM credentials linked. – Insouciant

Answer 2

Here is the way:

const corsPolicy = {
  Bucket: bucketName,
  CORSConfiguration: {
    CORSRules: [
      {
        AllowedHeaders: ['*'],
        AllowedMethods: ['GET', 'HEAD', 'POST', 'PUT'],
        AllowedOrigins: ['*'],
        ExposeHeaders: ['Content-Range', 'Content-Length', 'ETag']
      }
    ]
  }
};
await s3.putBucketCors(corsPolicy).promise();

Dustup

A little context as to where that lives would be super helpful. : ) – Toor

Answer 3

For anyone else who has this problem, the 'Etag' in the ExposeHeaders field caused us this issue and removing that resolved it.

Crackbrained