Skip to content
PLAY VIDEO PLAY VIDEO PLAY VIDEO
By Mikel Lindsaar

Cross-Origin Resource Sharing

One of the fun things about web application development, is no matter how long you have been in the game, things are always changing and there are new challenges to resolve.

For example, today, while working on an application, we were getting custom font rendering issues. I knew this was a Cross-Origin Resource Sharing problem, as I had seen it before, but I had totally forgotten how to fix it :)

I clued onto this because Chrome was reporting:

Redirect at origin 'https://123456789.cloudfront.net' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://website.com' is therefore not allowed access"

The application in question uses AWS Cloudfront as it's CDN. Cloudfront is set to have the application as the origin, which means we don't need to use gems like asset-sync to keep an S3 bucket in harmony with our deployed application. However, when googling for the problem, I couldn't find a solution that didn't involve S3. So that meant I needed to go hunt.

Happily, the solution was quite simple. Use the rack-cors gem (source code).

Because we aren't using S3 for our assets, we just need to make sure that two things happen and then test with a third:

1) Our Rails app says it's ok for the browser to fetch assets from Cloudfront

Install the rack-cors gem in your Gemfile:

group :production, :staging do
  gem 'rack-cors', :require => 'rack/cors'
end

Then edit your environment file to add in the details for the CORS headers:

  # Enable serving of images, stylesheets, and JavaScripts from an asset server.
  config.action_controller.asset_host = "https://123456789.cloudfront.net"

  config.middleware.insert_before 0, "Rack::Cors" do
    allow do
      origins "https://123456789.cloudfront.net"
      resource '*', :headers => :any, :methods => [:get, :options]
    end
  end

The origins directive is passed a string that needs to match your CDN (domain name changed to protect the innocent)

2) That cloudfront passes through these headers when it is serving files.

This also is not too bad. Go into your cloudfront settings in the AWS console, select your distribution, then go into "Distribution Settings".

Then choose Behaviours and edit the behaviour that services your Rails app (in my case it is the Default (*) behaviour)

Then in the "Forward Headers" select box, change it to "Whitelist" and choose "Origin" and add it to the list.

3) Test

With the above done, save your settings and let the Cloudfront system redeploy (this can take a while) and you should be good to go.

Latest Articles by Our Team

Our expert team of designers and developers love what the do and enjoy sharing their knowledge with the world.

We Hire Only the Best

reinteractive is Australia’s largest dedicated Ruby on Rails development company. We don’t cut corners and we know what we are doing.

We are an organisation made up of amazing individuals and we take pride in our team. We are 100% remote work enabling us to choose the best talent no matter which part of the country they live in. reinteractive is dedicated to making it a great place for any developer to work.

Free Community Workshops

We created the Ruby on Rails InstallFest and Ruby on Rails Development Hub to help introduce new people to software development and to help existing developers hone their skills. These workshops provide invaluable mentorship to train developers, addressing key skills shortages in the industry. Software development is a great career choice for all ages and these events help you get started and skilled up.

  • Webinars

    Webinars

    Webinars are our online portal for tips, tricks and lessons learned in everything we do. Make the most of this free resource to help you become a better developer.

    Learn more about webinars

  • Installfest

    Installfest

    The Ruby on Rails Installfest includes a full setup of your development environment and step-by-step instructions on how to build your first app hosted on Heroku. Over 1,800 attendees to date and counting.

    Learn more about Installfest

  • Development Hub

    Development Hub

    The Ruby on Rails Development Hub is a monthly event where you will get the chance to spend time with our team and others in the community to improve and hone your Ruby on Rails skills.

    Learn more about Development Hub

Get the “reinteractive Review” Monthly Email