How can I fix the 'CORS policy' error I'm getting while trying to run my React-admin app on Rails 6 and ActiveStorage?

Im making use of Rails 6 and ActiveStorage to store files on S3.

I get a CORS error when I try to run my react-admin app.

Error message from my react-admin front end:

Access to fetch at 'https://my-backend.com' from origin 'http://my-react-admin-app.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
fetch.js:50     GET https://my-backend.com/data?_end=100&_order=ASC&_sort=id&_start=0&locale=en net::ERR_FAILED.

I have set up CORS policy for my bucket as follows (and it still wont work):

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "HEAD",
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "X-Total-Count"
        ]
    }
]

Any pointers? - NOTE: everything works as it should when I run everything locally.

My gemfile has:

gem "rails", "~> 6.0.0"
gem "aws-sdk-s3", require: false
gem "rack-cors", "~> 1.0.3"

My cors.rb:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"
    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :delete, :options],
      expose: "X-Total-Count"
  end
end

As I can see the error is due to CORS settings on the server (Rails backend) not with S3. This can be because 'Access-Control-Allow-Origin' header is not present in the request resource that should be provided by Rails backend.

There are multiple steps you have to follow to solve this issue. Make sure to restart Rails server after making each of the following changes.

1. Ensure that CORS settings are correct in Rails server configuration (config/application.rb file or config/initializers/cors.rb). Your cors.rb looks fine but check whether it is located in config/initializers path and Rails application is picking it up correctly.

If error still persist, then:

2. Try adding the following settings to config/application.rb as follows: (Note: Replace http://react-app.com with actual frontend domain name.)

   module YourAppName
   class Application < Rails::Application
   # To initialize configuration defaults for originally generated Rails version
   config.load_defaults 6.0

    # Rest of the code
   
    # To configure CORS
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'http://react-app.com'
        resource '*',
          headers: :any,
          methods: [:get, :post, :put, :patch, :delete, :options, :head],
          expose: ['X-Total-Count']
      end
    end
   

   end
   end

If error still persist, then:

3. Check for any proxies or any other server settings that can override your CORS settings. Check whether web server like Nginx or Apache is not stripping out CORS headers.

If error still persist, then:

4. Make sure domain of React App is listed in the config.hosts list in Rails configuration (especially if you are using Rails 6).

If error still persist, then:

5. If you are serving your aPI under a different path, then add the path to the resources statement as resource 'api/*

Hope this will solve your issue.