【Rails】APIにCORSの設定をする方法

RailsのAPIでCORSの設定をする方法をメモしておきます。gemを使うことでサクッと実装できました。

CORS(Cross-Origin Resource Sharing)とは

CORSとは、クライアントが自分と違うオリジンをもつサーバーからのアクセスを許可する仕組みのことです。

WebクライアントとAPIを分ける場合などで、異なるオリジン間の通信を行うためにはCORSの設定をする必要があります。

以下のページに詳しく書かれています。

参考:CORSまとめ

※オリジン(ex. http://www.example.com:3000)はスキーム「http://」、ホスト「www.example.com」、ポート「3000」の組み合わせからなります

 

「rack-cors」gemの追加

「rack-cors」gemを追加します。

参考:rack-cors

・Gemfile

 

CORSの設定

application.rbにCORSの設定をしていきます。

・config/application.rb

「*」の場合は全て許可することを意味し、以下の通りに設定していきます。

  • origins (文字列 or 正規表現) : どのオリジンを許可するか(APIを叩く側)
  • resource (文字列 or 正規表現) : 許可したいリソースファイル
  • methods (文字列 or Array or :any) : 許可したいHTTPメソッド
  • headers (文字列 or Array or :any) : 許可したいHTTPヘッダー

実際に設定していくとはのような感じになりました。

・config/application.rb

 

CORSの設定が反映されているか確認

以下のコマンドで再起動し、CORSの設定が反映されているか確認します。

 

「http://localhost:5000」からAPI(http://localhost:7000)にアクセスした時のレスポンスを見てみます。実際にアクセスするとコンソールに以下のようなエラーメッセージが表示され、アクセスできないことが確認できました。

 

次にCORSで設定した「http://localhost:8000」でアクセスしてみます。NetworkのAPIのResponse Headersに以下のレスポンスが帰ってき、アクセスできることが確認できます。

以上、RailsのAPIでCORSの設定をする方法を紹介しました。