S3 CORS errors never end

Question

I'm using S3 to upload images from the UI. I have an AMI with access key id/secret access key that only allow putObject and getObject . All putObject are called with public-read acl.

I have this CORS configuration in the S3 bucket:

<CORSConfiguration>
<CORSRule>
    <AllowedOrigin>https://foo.com</AllowedOrigin>
    <AllowedOrigin>http://localhost:5000</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>

I keep getting these CORS errors:

XMLHttpRequest cannot load https://foo.s3.amazonaws.com/items/images/e75768-2018-0-26/roar-bomber.png . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://foo.com ' is therefore not allowed access. The response had HTTP status code 403.

I am clearly allowing the proper origins so I have no idea why it keeps yelling at me. But what's worse is that it will work at times and then stop working again even after nothing has changed...

Using Chrome browser.

Answer 1

Update

AWS doesn't allow setting OPTIONS method as allowed method. Following the guide https://docs.aws.amazon.com/en_pv/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors , check the part AllowedMethod Element .

---

Add OPTIONS method as allowed in your CORS configuration.

Preflight request uses OPTION method to check which methods are allowed for CORS.

https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request