I figured I would make a quick tutorial on this as I searched high and low for days to find a solution. If you're like me, you love the Trix (Action Text) editor for Rails. It's convenient, clean looking, and most importantly functional. It seems to have everything you need and nothing that you don't.
So you get it up and running on your development environment with ease and then go to push to production. You think you have all your Amazon S3 settings correct but it's a no go when you try to attach, say, an image in your post or article. You get that ugly line through the middle of your pic telling you, this ain't working!
So here's the fix that will likely correct your issue - provided everything else is working with your Active Storage settings linking to your Amazon S3 Bucket. You need to add to cross-domain resource sharing - also known as *CORS *(Cross-Origin Resource Sharing).
It's pretty simple to do.
<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>https://yourdomain.com</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>Authorization</AllowedHeader> </CORSRule> <CORSRule> <AllowedOrigin>https://yourdomain.com</AllowedOrigin> <AllowedMethod>PUT</AllowedMethod> <AllowedMethod>POST</AllowedMethod> <MaxAgeSeconds>3000</MaxAgeSeconds> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>![Uploading file...]()
Make sure you save it. Then head back over to your application in production and give your editor a try. You should be all good to go.