CORS通信とは

2020年5月11日 • ☕️ 1 min read

今回のReact × Rails( API )プロジェクトで初めてCORSを知ったので、概要や使い方を忘れないようにメモしておく。

CORSとは？

CORSは、Cross Origin Resource Sharingの略。要は、開発しているAPIが通信を受け付けるリクエスト元（オリジン）を指定してあげることで、複数のドメインからリクエストを受けて通信できるようにするためのもの。

フロントエンドはReact、バックエンドはRails製APIのように切り分けて開発を行う場合に、Rails側でこのCORS設定をしてあげることによって、React側からAPIを叩けるようになる。

どうやって使うのか

以前のこの記事でReact × Rails (API)のサンプルプロジェクトを作成済みなので、今回はそれを使ってCORSの設定をしてみる。

まずは、Gemfileの中のgem 'rack-cors'がAPIモードだとデフォルトでコメントアウトされているので、コメントアウトを解除する。

Gemfile

# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors' #ここのコメントアウトを解除

bundle installで無事にrack-corsというgemをインストールすると、config/initializers/cors.rbというファイルが自動生成される。 config/application.rbもしくはそのcors.rbに以下の記述を追加。

# cors.rbに記述の際は、Rails.applicationをconfigの前に付ける！
config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'http://localhost:3000' # フロントエンドで使用
        # するドメインを記述。本番環境の場合はデプロイしたURLを貼る。
        resource '*',
        :headers => :any,
        :methods => [:get, :post, :patch, :delete, :options],
      end
    end

ログイン機能でsessionのデータをCookieに保存できるようにしたい場合は、以下の記述を追加。

config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'http://localhost:3000'
        resource '*',
        :headers => :any,
        :methods => [:get, :post, :patch, :delete, :options],
        credentials: true # ここの記述を追加
      end
    end