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

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

CORS(Cross-Origin Resource Sharing)とは

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

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

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

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

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

・Gemfile

1	gem 'rack-cors'

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

・config/application.rb

config.middleware.insert_before 0, Rack::Cors do

allow do

origins "*"

resource "*",

headers: :any,

methods: [:get, :post, :options, :head]

end

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

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

・config/application.rb

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

以下のコマンドで再起動し、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に以下のレスポンスが帰ってき、アクセスできることが確認できます。

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の設定をする方法を紹介しました。