By default Rails blocks cross origin resource sharing requests (CORs) to protect applications from malicious requests. However, when developing a SPA frontend using a framework like React or Vue.JS and a headless Rails API backend we will need to make requests from a different port serving our app on our local host. To allow these requests to reach our server, we will add a piece of middleware as a gem called
This gem will enable us to whitelist request origins and their methods. Add the
rack-cors (1.1.1) gem to your Gemfile then run bundle install afterwords. Once the gem is installed, open, and uncomment the
# Avoid CORS issues when API is called from the frontend app. # Handle Cross-Origin Resource Sharing (CORS) # in order to accept cross-origin AJAX requests. # Read more: https://github.com/cyu/rack-cor Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do origins 'localhost:8080' resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] end end
The Rails defaults are reasonable so the only modification required is allowing requests from the origin
localhost:8080 (the port of your frontend app) instead of example.com.