Mike Rogers on a Snowmobile

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>

This was written by Mike Rogers, a freelance Ruby on Rails developer based in London.

Share the ♥ by sharing this!

If you want to discuss this post, feel free to tweet me (@MikeRogers0) or drop me an email. Any code samples unless stated otherwise are licensed under the The MIT License (MIT). Spotted a mistake? Send me a pull request :)