CORS configuration in Ruby on Rails - Mini Project: Build & Apply

CORS configuration

📖 Scenario: You are building a Rails API that will be accessed by a frontend app running on a different domain. To allow the frontend to communicate with your API, you need to configure CORS (Cross-Origin Resource Sharing) properly.

🎯 Goal: Configure CORS in a Rails application to allow requests from the frontend domain http://localhost:3000.

📋 What You'll Learn

Create a new initializer file for CORS configuration

Set the allowed origin to http://localhost:3000

Allow HTTP methods GET, POST, and OPTIONS

Allow headers Content-Type and Authorization

💡 Why This Matters

🌍 Real World

Many web apps have frontend and backend on different domains or ports. CORS configuration allows the frontend to safely access backend APIs.

💼 Career

Backend developers often configure CORS to enable frontend apps to communicate with APIs securely and correctly.

1

Create the CORS initializer file

Create a new file called config/initializers/cors.rb and add the basic structure to configure CORS using the Rails.application.config.middleware.insert_before method.

Ruby on Rails

# Create config/initializers/cors.rb
# Your code here

Need a hint?

Use Rails.application.config.middleware.insert_before 0, Rack::Cors do ... end to start the CORS setup.

2

Add the allowed origin configuration

Inside the Rack::Cors block, add a allow block that sets the origins to 'http://localhost:3000'.

Ruby on Rails

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  # Add allow block with origins 'http://localhost:3000'
  # Your code here
end

Need a hint?

Use allow do ... end and inside it set origins 'http://localhost:3000'.

3

Allow specific HTTP methods and headers

Inside the allow block, add resource configuration that allows all paths '*', permits HTTP methods GET, POST, and OPTIONS, and allows headers 'Content-Type' and 'Authorization'.

Ruby on Rails

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'
    # Add resource configuration here
    # Your code here
  end
end

Need a hint?

Use resource '*', headers: [...], methods: [...] inside the allow block.

4

Complete and save the CORS configuration

Ensure the entire config/initializers/cors.rb file contains the full CORS configuration with insert_before, allow, origins, and resource settings as specified.

Ruby on Rails

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'
    resource '*', headers: ['Content-Type', 'Authorization'], methods: [:get, :post, :options]
  end
end
# Save the file

Need a hint?

Check that the file has the full configuration as in previous steps combined.