Configuring CORS on S3 for ActiveStorage
Posted on
If you haven’t tried Rails new ActiveStorage feature, do it! It’s bloody lovely to work with! However, recently I ran into a “OMFG why isn’t this working” moment while uploading files with Direct Upload to AWS S3 via ActiveStorage in Ruby On Rails.
The Error
After submitting the form, it got stuck in it’s disabled “I am submitting” state.
The error in my browser console looked a little like this:
Access to XMLHttpRequest at 'https://my-s3-bucket.s3.eu-west-2.amazonaws.com/z8kvinUXFQFPy…Signature=3652b50…' from origin 'https://example.com' 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.
The Fix
The fix took me a bit of searching to get this totally right, but on the AWS website navigate to your S3 bucket, go to permissions, then “CORS Configuration”. The URL should look something like:
https://s3.console.aws.amazon.com/s3/buckets/YOUR_BUCKET_NAME/?region=us-east-1&tab=permissions
From here, adjust your configuration to look like:
<?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>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>