はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
本日は React × Rails 開発において欠かせない CORS の設定についてみていこうと思います
CORS って何ですか？って方は以前に記事で解説しているのでそちらを見て概要を知ってから設定してみてください
CORS の概要
CORS（Cross-Origin Resource Sharing）は、異なるオリジン（スキーム・ドメイン・ポート）間でのリソース共有を可能にする仕組みです。
たとえば以下のような状況では CORS が必要です。
- Rails API:
http://localhost:3000 - React フロントエンド:
http://localhost:5173
同一オリジンポリシーにより、異なるオリジン間の通信は通常ブロックされます。そのため CORS を適切に設定する必要があります。
手順 1: rack-cors のインストール
まず、Gemfile に以下を追加します。
gem 'rack-cors'
その後、以下のコマンドを実行してインストールします。
bundle install
手順 2: 初期化ファイルで CORS を設定
config/initializers/cors.rb というファイルを作成されているはずなので以下のように書いてください。
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins 'http://localhost:5173' # フロントエンドのURL
resource '*',
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head],
credentials: true # Cookie などを利用する場合に必要
end
end
私は react(vite)を使用しておりポート番号が 5173 なので上記のように記述しています。
手順 3: application.rb の確認（通常不要）
config/application.rb に require 'rack/cors' を明示的に書く必要は通常ありませんが、念のため確認しておくと安心です。
フロントエンドとの連携確認
CORS 設定後、ブラウザのデベロッパーツールで以下の点を確認します。
- エラーに "CORS policy" と表示されていないか
- Cookie を使う場合、フロントエンドからのリクエストに
withCredentials: trueが含まれているか
まとめ
| 設定項目 | 説明 |
|---|---|
| origins | 許可するフロントエンドの URL |
| resource | 対象リソース。'*' で全リソース |
| headers | 許可するヘッダー。通常は :any
|
| methods | 許可する HTTP メソッド |
| credentials | Cookie 共有の許可有無（true/false） |
参考リンク
- rack-cors GitHub: https://github.com/cyu/rack-cors