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

It's complaining that the CORS configuration on the S3 bucket is blocking the request. It is unrelated to the CORS configuration on your dev server. You need to configure CORS on the S3 bucket, following the link in the answer below. — Mark B, Dec 02 '17 at 17:04
@MarkB id be interested in learning how to read that error message correctly. My reading of it is completely different. I think it would help me in the future, unless you agree it has clarity needs. — Pompey Magnus, Dec 02 '17 at 18:24
It has less to do with the wording in the error message, and more to do with an understanding of how CORS works. When you include something in your web page that is hosted on another domain, the browser reaches out to the domain to see if it's OK with them to include their content in your webpage (by checking the CORS header). CORS isn't about telling the browser what other domains can be displayed in your page, CORS is about telling the browser if other domains can include your content. Thus your server's CORS config was irrelevant to the issue you were having, it had to be configured on S3. — Mark B, Dec 02 '17 at 18:46

score 3 · Accepted Answer · answered Dec 02 '17 at 16:56

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?

answered Dec 02 '17 at 16:56

andersfylling

718
10
24

the CORS set up on S3 is the default one, but the error is complaining that my server isn't sending the correct header Access-Control-Allow-Origin , or am i reading that wrong? – Pompey Magnus Dec 02 '17 at 17:01

score 2 · Answer 2 · answered Dec 02 '17 at 17:06

2

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

answered Dec 02 '17 at 17:06

Anaya Agarwal

116
8

John Hanley · Answer 3 · 2017-12-02T19:16:45.000

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)

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

3 Answers3