Matt Kozak. Let's talk
tech-tips

Active Storage direct upload to cloud

If you've encounters error similar to this one:

Failed to load https://storage.googleapis.com/... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

when using Rails's ActiveStorage with direct upload enabled on the frontend side, it simply means you need to configure CORS on your service provider.

Proper CORS configuration for GCS would look like this:

[
    {
      "origin": ["*"],
      "responseHeader": ["Content-Type", "Content-Md5"],
      "method": ["PUT", "GET", "HEAD", "DELETE"],
      "maxAgeSeconds": 3600
    }
]

and for AWS  S3 like this:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]
Mateusz Kozak

Written by

Mateusz Kozak

CTO, software builder, and independent advisor working across energy and connected products.

Your next move

What's the decision
you need to get right?

Tell me what you're building, what's at stake, and when you need to move.

Book a 30-minute fit call