aws-sdk complains about a cors header missing that actually exists

Question

using webpack to run dev server, i'm trying to list items in an S3 bucket and console out the results using the javascript aws-sdk in the browser.

when doing so i get this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://bucketname.s3.amazonaws.com/?list-type=2&max-keys=2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

however i have that header set in the webpack dev server config, proven by:

curl -I http://localhost:8080

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, PATCH, OPTIONS
Access-Control-Allow-Headers: X-Requested-With, content-type, Authorization
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 7170
Vary: Accept-Encoding
Date: Sat, 02 Dec 2017 16:15:04 GMT
Connection: keep-alive

So i tried * on everything:

HTTP/1.1 404 Not Found
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: *
Access-Control-Allow-Headers: *

If the header is there and error is saying its missing, could it be something else like authorization?

If its really the header setup, what would be a next step if the header is actually there?

UPDATES****

1: Adding the CORS setting on S3 though I believe the header its complaining about wouldn't be on S3:

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

Also the bucket is not public or static hosting enabled.

2: This worked:

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

From URL given by marked answer

Answer 1

The reason that your first example did not work is this CORS Common Request Header:

<AllowedHeader>Authorization</AllowedHeader>

Common Request Headers

Basically the way you had your CORS policy written is that all requests require the Authorization header to be present. Example:

Authorization: AWS AWSAccessKeyId:Signature

The solution is to change it to:

<AllowedHeader>*</AllowedHeader>

How Does Amazon S3 Evaluate the CORS Configuration On a Bucket?

When Amazon S3 receives a preflight request from a browser, it evaluates the CORS configuration for the bucket and uses the first CORSRule rule that matches the incoming browser request to enable a cross-origin request. For a rule to match, the following conditions must be met:

• The request's Origin header must match an AllowedOrigin element.
• The request method (for example, GET or PUT) or the Access-Control-Request-Method header in case of a preflight OPTIONS request must be one of the AllowedMethod elements.
• Every header listed in the request's Access-Control-Request-Headers header on the preflight request must match an AllowedHeader element.

Cross-Origin Resource Sharing (CORS)

Answer 2

you set CORS on S3 bucket configuration. Login on AWS management console. go to the S3 bucket ; on right you find option

Answer 3

I hope reading this can help: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html

How do you set your CORS, is it using an xml file?