Rails APIモードでCORSエラー

Ruby on Rails 7 のAPIモードで実装した時に発生したCORSエラー対応。

環境

フロントエンド：React
バックエンド：Rails API（JSON）

現象

フロントエンドからバックエンドにaxiosでリクエストするとCORSエラーが発生。

Access to XMLHttpRequest at 'http://localhost:4000/users/1' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因

ブラウザ側のセキュリティが強化されていて、意図しない挙動を防ぐために実装されている。
フロントエンドとバックエンドでサーバーやドメインがわかれている場合、たとえばハッキングされて悪意のあるドメインにすり替える、といったことを防ぐために実装されている。

会員制サイトでログインするときに、ID/PWが引っこ抜くといったことが可能（もしハッキングされた場合）。

そこで、意図したドメインやアクションだけを許可するような仕組みが業界標準になっている。

対応

CORS設定を以下のようにアクティブにして（コメントアウトを解除して、originsを「*」にする。
そのあとに、Railsサーバーを再起動する。

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

上記の例では、手っ取り早く「全ドメイン、全アクションを許可」にしているが、実装時には厳密に指定する必要あり。そうしないと、CORSの意味がなくなってしまい、脆弱性がある状態になってしまうため。