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
Cross-Origin Resource Sharing (CORS) errors occur when a server doesn't return the HTTP headers required by the CORS standard. To resolve a CORS error from an API Gateway REST API or HTTP API, you must reconfigure the API to meet the CORS standard.
If the server is under your control, add the origin of the requesting site to the set of domains permitted access by adding it to the Access-Control-Allow-Origin header's value. You can also configure a site to allow any site to access it by using the * wildcard. You should only use this for public APIs.
Enable CORS support on a REST API resourceSign in to the API Gateway console at https://console.aws.amazon.com/apigateway . Choose the API from the APIs list. Choose a resource under Resources. This will enable CORS for all the methods on the resource.
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?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With