tech-tips

Active Storage direct upload to cloud

November 28, 2021 1 min read

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": []
    }
]