Rails 5.2 Active Storage direct upload failure: CORS header ‘Access-Control-Allow-Origin’ missing

Question

I am trying out Rail 5.2.0.rc1 Active Storage, using its included JavaScript library to upload PDF docs directly from the client to the cloud. But on submitting a form I get a browser error in both Firefox & Chrome:

Cross-Origin Request Blocked... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Headers are set thus this.xhr.setRequestHeader... in the activestorage.js and dont appear to be configurable: https://github.com/rails/rails/blob/master/activestorage/app/javascript/activestorage/blob_record.js

any suggestions anyone?

Answer 1

Try setting the CORS permission on the S3 bucket with the following:

<?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>