DEV Community

loading...
Cover image for Setting Up CORS On A Rails App

Setting Up CORS On A Rails App

truetechcode profile image Aosu Stephen Terver ・2 min read

Problem

I was trying to integrate a Rails API with a React front end when I encountered an error message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://immense-savannah-47088.herokuapp.com/api/v1/books. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing.

Solution

In an effort to solve the problem I tried several suggested solutions including this one I saw in a Medium article that requires the use of the rack-cors ruby gem.

1. Add rack-cors Gem

In your gemfile you should add the following line or in some cases, it is commented out, you just need to uncomment it:

gem 'rack-cors', :require => 'rack/cors'

2. Bundle install

After adding the rack-cors gem you will need to run the following command, to install the gem:

$ bundle install

3. Add the configuration in the Application.rb

Add the following lines of code to your application.rb file:

module YourApp
  class Application < Rails::Application

    # ...

    config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', :headers => :any, :methods => [:get, :post, :options]
      end
    end
  end
end
Enter fullscreen mode Exit fullscreen mode

This should work as long as you won’t be using Heroku or other services that use Rack-based servers but if you intend to use Heroku then you will do this instead of the number three-step above.

4. Add the configuration in the Config.ru

Add the following lines of code to the end of your config.ru file:

# ....

require 'rack/cors'
use Rack::Cors do

 # allow all origins in development
 allow do
   origins '*'
   resource '*',
       :headers => :any,
       :methods => [:get, :post, :delete, :put, :options]
 end
end
Enter fullscreen mode Exit fullscreen mode

Check the Ruby documentation for more information on using Rack middleware and the MDN to learn more about CORS.

Discussion (1)

pic
Editor guide
Collapse
phillipug profile image
Phillip Musiime

If you are using Rails 6:

First go to your Gemfile and uncomment gem 'rack-cors'. Then run bundle install

After that go to config/initializers folder. There, you should find a file called cors.rb.

Uncomment the code that looks like this

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'example.com'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
Enter fullscreen mode Exit fullscreen mode

change the line that says origins 'example.com' to origin '*' or if you're request will be originating from a particular origin, then set it accordingly.

This worked for me. Hope it works for you as well. Cheers