Configure Vultr CORS to accept direct uploads from Active Storage

Gorka — Wed, 21 Sep 2022 23:20:25 +0000

When I configured Rails' Active Storage to use Vultr Object Storage everything looked fine but when I tried to upload some images from Action Text I got red messages in the console. Something was not working ok.

I went to Rails Guides, to Active Storage Overview and then to Direct Uploads. In section 9.2 Cross-Origin Resource Sharing (CORS) configuration they offer some information on how to configure CORS for the main services but... where's Vultr?

Turns out Vultr has an API that's compatible with a subset of the S3 API. Luckily they share CORS configuration. And they even have a wiki page explaining how to configure it.

I'm just writing this here in case the official information disappears from the internet.

In order to configure this thing you can use a tool named s3cmd. It's available from brew.sh.

Before uploading the configuration to Vultr you have to configure the tool. Vultr has all the steps on it's wiki but I'm going to copy here the basics.

Run the configuration script:

$ s3cmd --configure

Ignore the region, and set ewr1.vultrobjects.com as the S3 endpoint. The DNS-style template for accessing a bucket is %(bucket)s.ewr1.vultrobjects.com.

Now you have to create an xml file with the content:

<CORSConfiguration>
<CORSRule>
    <ID>Get and put from/to Vultr Object Storage</ID>
    <AllowedOrigin>http://example.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
    <ExposeHeader>Origin</ExposeHeader>
    <ExposeHeader>Content-Type</ExposeHeader>
    <ExposeHeader>Content-MD5</ExposeHeader>
    <ExposeHeader>Content-Disposition</ExposeHeader>
    <MaxAgeSeconds>3600</MaxAgeSeconds>
</CORSRule>
</CORSConfiguration>

You can add as many AllowedOrigin as you need. Maybe with https, www subdomain, ...

And then run the command:

$ s3cmd setcors RULES_FILE.xml s3://BUCKET_NAME

This should be enough to both upload and get images from the buckets.

DEV Community: Gorka

Configure Vultr CORS to accept direct uploads from Active Storage