rails5APIモード以外でCORS対策

CORSとは何かという方はこちら

Failed to load https://hogehoge: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://hogehoge' is therefore not allowed access

というエラーが表示されてAPIが叩けないという問題を解決する方法です。

環境

• Rails5.01
• Ruby2.4.1

方法

gem 'rack-cors' というgemを使いクロスサイトアクセスができるようにします。 このgemはRailsでAPIモードを選択した場合、最初から記述されているものなので心配はないと思います。

rack-cors

httpsのOPTIONS メソッドに対してレスポンスを返すようになる。(preflightリクエストはOPTIONメソッドを使用) そのために routes.rbで設定をする必要はありません。 以下の記事ではこのgemを使わない方法で実装しています。 Rails APIでクロスドメインとpre-flight対応 - Qiita

使い方

1. Gemfileに追加しインストール

gem 'rack-cors' 

bundle install

1. cors.rbのコメントアウトを解除

# config/initializers/cors.rb
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

これだけでひとまずリクエストを処理できるようになります。