26

I'm just about to pull my hair out... I've been trying to enable CORS in this Rails app since the morning and it just doesn't work. I've tried this, using Rack Cors Gem, this answer and this post all without success.

Can someone point me in the right direction?

Here's my js:

      var req = new XMLHttpRequest();

      if ('withCredentials' in req) {
            // req.open('GET', "https://api.github.com/users/mralexgray/repos", true);
            req.open('GET', "http://www.postcoder.lc/postcodes/" + value, true);
            // Just like regular ol' XHR
            req.onreadystatechange = function() {
                if (req.readyState === 4) {
                    if (req.status >= 200 && req.status < 400) {
                        // JSON.parse(req.responseText) etc.
                        console.log(req.responseText);
                    } else {
                        // Handle error case
                    }
                }
            };
            req.send();
        }

When I try this url (from an external client): https://api.github.com/users/mralexgray/repos that works ok, I'm assuming the problem is with my Rails API. Am I wrong?

EDIT: Currently I have this in my controller:

skip_before_filter :verify_authenticity_token
before_filter :cors_preflight_check
after_filter :cors_set_access_control_headers

# For all responses in this controller, return the CORS access control headers.
def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Max-Age'] = "1728000"
end

# If this is a preflight OPTIONS request, then short-circuit the
# request, return only the necessary headers and return an empty
# text/plain.

def cors_preflight_check
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = 'X-Requested-With, X-Prototype-Version'
  headers['Access-Control-Max-Age'] = '1728000'
end
Community
  • 1
  • 1
WagnerMatosUK
  • 4,309
  • 7
  • 56
  • 95
  • I've tried and it didn't work. I've even used the example app and still no luck – WagnerMatosUK Apr 20 '15 at 15:03
  • 1
    you ever got this to work? I have a angular front-end making the call and I've tried all the solutions as well. The rack cors gem doesn't work for me. – Ka Mok Aug 04 '16 at 17:59

3 Answers3

39

You should use rack cors

It provides a nice DSL, to use in your config/application.rb, instead of the messy header work and before filters.

A very permissive would be as follows, but of course, you'll have to tailor it a bit.

use Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end  
end
apneadiving
  • 114,565
  • 26
  • 219
  • 213
  • Do you mean `config/application.rb` ? – WagnerMatosUK Apr 20 '15 at 15:04
  • I dont know what `it didnt work` means :) I use it in my app and its just fine. Do you have a bit more information? – apneadiving Apr 20 '15 at 15:04
  • Ok, it is working on Chrome now. I think the problem was the kind of permissions. Interestingly it doesn't work on FF nor Safari. I guess it has nothing to do with Rails but the JS side of it? – WagnerMatosUK Apr 20 '15 at 15:15
  • yeah maybe, try to use this client side: https://github.com/mapbox/corslite/ its meant to be cross browsers unfortunately its just for GET requests. – apneadiving Apr 20 '15 at 15:20
  • 1
    Could you please explain "but of course, you'll have to tailor it a bit"? Why is it important and how should we do it? – Aleksandrus Aug 10 '16 at 12:50
  • I have a similar set up, but have specified a list of allowable origins, but continue runninig into this error: `cross origin resource sharing error: preflightInvalidAllowCredentials`. I'm checking the request and see that `Access-Control-Allow-Origin` in the respons header matches `Origin` in the request header. Any insight? – Matt Feb 08 '21 at 22:25
21

Rack::Cors provides support for Cross-Origin Resource Sharing

Steps to enable rackcors :

  1. Add this gem to your Gemfile:

    gem 'rack-cors'

  2. Add the code below to config/application.rb

If you are using Rails 3/4:

config.middleware.insert_before 0, "Rack::Cors" do
  allow do
    origins '*'
    resource '*', :headers => :any, :methods => :any
  end
end

If you are using Rails 5:

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: :any
  end
end
michaelrbock
  • 1,160
  • 1
  • 11
  • 20
errakeshpd
  • 2,544
  • 2
  • 28
  • 35
2

Here's what worked for me:

  1. Add this to Gemfile: gem 'rack-cors' then bundle install

  2. Create a new file /config/initializers/cors.rb

  3. Inside the file place the following:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :patch, :put]
  end
end

That's it!

FYI the instructions came directly from here

stevec
  • 41,291
  • 27
  • 223
  • 311