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
1 | gem 'rack-cors' |
CORSの設定
application.rbにCORSの設定をしていきます。
・config/application.rb
1 2 3 4 5 6 7 8 | config.middleware.insert_before 0, Rack::Cors do allow do origins "*" resource "*", headers: :any, methods: [:get, :post, :options, :head] end end |
「*」の場合は全て許可することを意味し、以下の通りに設定していきます。
- origins (文字列 or 正規表現) : どのオリジンを許可するか(APIを叩く側)
- resource (文字列 or 正規表現) : 許可したいリソースファイル
- methods (文字列 or Array or :any) : 許可したいHTTPメソッド
- headers (文字列 or Array or :any) : 許可したいHTTPヘッダー
実際に設定していくとはのような感じになりました。
・config/application.rb
1 2 3 4 5 6 7 8 | config.middleware.insert_before 0, Rack::Cors do allow do origins "http://localhost:8000", "https://example.jp" resource "*", headers: :any, methods: [:get, :post, :patch, :delete, :options, :head] end end |
CORSの設定が反映されているか確認
以下のコマンドで再起動し、CORSの設定が反映されているか確認します。
1 | $ docker-compose restart |
「http://localhost:5000」からAPI(http://localhost:7000)にアクセスした時のレスポンスを見てみます。実際にアクセスするとコンソールに以下のようなエラーメッセージが表示され、アクセスできないことが確認できました。
1 | Access to XMLHttpRequest at 'http://localhost:7000/api/tests/' from origin 'http://localhost:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. |
次にCORSで設定した「http://localhost:8000」でアクセスしてみます。NetworkのAPIのResponse Headersに以下のレスポンスが帰ってき、アクセスできることが確認できます。
1 2 3 4 | Response Headers Access-Control-Allow-Methods: GET, POST, PATCH, DELETE, OPTIONS, HEAD Access-Control-Allow-Origin: http://localhost:8000 Access-Control-Expose-Headers: |
以上、RailsのAPIでCORSの設定をする方法を紹介しました。