RailsでCORS設定をしてみる！

クローバー

access-control-allow-originっていうエラーが出た。。。

RailsをAPIとして利用する場合に、「access-control-allow-origin」というエラーが出てきました。

「access-control-allow-origin」を解消するためには、CORSを設定しないとダメだということで、その設定方法について今回は紹介していきます。

CORSとは？
CORSの設定方法
1. gemの導入
2. cors.rbの設定
参考サイト

CORSとは？

オリジン間リソース共有 (Cross-Origin Resource Sharing, CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。ウェブアプリケーションは、自分とは異なるオリジン (ドメイン、プロトコル、ポート番号) にあるリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。
https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

簡単に説明すると、違うリソースから通信を投げたときに対応するかどうかって感じです。

例えば、RailsをAPI、frontをVueに設定しているとします。

お互い違うリソースであるため、通常はVueからRailsにGET通信を投げても「access-control-allow-origin」とエラーが出てしまいます。

しかし、CORS設定を行っておくと、VueからRailsにGET通信を行うときエラーが出ることなく、レスポンスを返すことができるようになるのです。

CORSの設定方法

CORSはRails側で設定します。

gemの導入

便利なgemがあるので、それを使いましょう。

gem 'rack-cors'

cors.rbの設定

gemを入れると自動で、config/initializersにcors.rbというファイルが出来るので、そこにとりあえず以下のコードを貼り付けてみましょう

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

上記のコードはすべてのオリジンからのリクエストを受け付けるという設定です。

特定のオリジンだけ(‘localhost:8080’と’https://www.sample.com’から)にしたいという場合は、以下のように設定してあげましょう。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:8080','https://www.sample.com'


    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

あとは、Dockerを利用している場合はコンテナを起動し直せば適用されるかと思います。