How to Use rack-cors in Rails for Cross-Origin Requests

To use rack-cors in Rails, add the gem to your Gemfile, run bundle install, then configure CORS rules in config/initializers/cors.rb. This setup allows your Rails app to accept cross-origin requests safely by specifying allowed origins, methods, and headers.

Syntax

The rack-cors configuration in Rails is placed inside an initializer file, usually config/initializers/cors.rb. It uses a block where you specify origins allowed to access your app, and resource rules defining which paths, HTTP methods, and headers are permitted.

Key parts:

• origins: Defines which domains can make requests.
• resource: Defines URL patterns and allowed HTTP methods.
• headers: Specifies which headers are accepted.
• methods: Lists HTTP verbs like GET, POST, etc.
• max_age: Optional, caches preflight response time.

ruby

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

Example

This example shows how to allow cross-origin requests from https://myfrontend.com to any resource in your Rails app. It permits all headers and common HTTP methods, enabling a frontend app to communicate with your API.

ruby

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://myfrontend.com'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      max_age: 600
  end
end

Output

No direct output; enables CORS headers in HTTP responses allowing cross-origin requests from https://myfrontend.com

Common Pitfalls

Common mistakes when using rack-cors include:

• Not inserting the middleware at the correct position, which can cause CORS headers to be missing.
• Using origins '*' in production, which is insecure.
• Forgetting to allow the OPTIONS method needed for preflight requests.
• Not restarting the Rails server after changing the config.

Always specify exact origins in production and include OPTIONS in allowed methods.

ruby

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

Right way:
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://trustedsite.com'
    resource '*',
      headers: :any,
      methods: [:get, :post, :options, :head]
  end
end

Quick Reference

Setting	Description	Example
origins	Allowed domains for cross-origin requests	'https://example.com'
resource	URL pattern and rules for CORS	'*' for all paths
headers	Allowed request headers	:any or ['Content-Type', 'Authorization']
methods	Allowed HTTP methods	[:get, :post, :options]
max_age	Cache time for preflight response in seconds	600

Key Takeaways

Add the rack-cors gem and configure it in an initializer to enable CORS in Rails.

Specify exact origins and include OPTIONS method for preflight requests.

Insert the middleware at the top to ensure CORS headers are added correctly.

Avoid using '*' for origins in production to keep your app secure.

Restart your Rails server after changing CORS settings to apply them.