Railsのエラー『ActionController::InvalidCrossOriginRequest』の解決方法

Railsアプリケーションで「ActionController::InvalidCrossOriginRequest」というエラーが発生することがある。このエラーは、クロスオリジンリクエスト（CORS）に関連し、不正なリクエストがブロックされていることを意味する。APIを外部のフロントエンドと連携させる場合や、異なるオリジン間でリクエストを送る場合に発生することが多い。発生条件と解決方法について詳しく説明する。

エラーの発生条件

このエラーは、以下の状況で発生する。

• 異なるオリジン（例: http://localhost:3000 と http://localhost:8080）間でのリクエスト
• Rack::Cors の設定が不十分または未設定
• CSRF（Cross-Site Request Forgery）対策が有効で、適切なトークンが送信されていない
• Same-Origin Policy により、ブラウザがリクエストをブロックしている
• フロントエンドの fetch や axios の設定が不適切

エラーメッセージの例

ActionController::InvalidCrossOriginRequest (Security warning: an embedded <form> on another site requested POST to /api/v1/users)

このメッセージは、他のオリジンからの POST リクエストがブロックされていることを示している。

原因1: CORSの設定が適切でない

Railsでは rack-cors を使用してCORSを設定する必要がある。

修正前: config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'example.com'
    resource '*', headers: :any, methods: [:get, :post, :options]
  end
end

上記の設定では example.com 以外のオリジンが許可されない。

修正後: 許可するオリジンを正しく設定

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' # 開発用（本番では特定のオリジンを指定）
    resource '*', headers: :any, methods: [:get, :post, :options]
  end
end

原因2: CSRFトークンが不足している

RailsはCSRF対策として protect_from_forgery をデフォルトで有効にしている。これにより、外部からの POST リクエストが拒否される。

修正前: application_controller.rb

class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
end

修正後: API専用のコントローラーでCSRFチェックを無効化

class Api::V1::BaseController < ApplicationController
  protect_from_forgery with: :null_session
end

原因3: フロントエンド側のリクエストが適切でない

JavaScriptの fetch や axios で credentials を含めずにリクエストすると、CSRFトークンが適切に送信されない。

修正前: JavaScriptの fetch リクエスト

fetch("http://localhost:3000/api/v1/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ name: "John" })
});

修正後: credentials を含める

fetch("http://localhost:3000/api/v1/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "include", // クッキーを送信
  body: JSON.stringify({ name: "John" })
});

原因4: プロキシ設定が不適切

フロントエンドが localhost:8080 で、バックエンドが localhost:3000 で動作している場合、CORSエラーが発生する。

解決策: proxy を設定する

Vue.jsの場合 (vue.config.js)

module.exports = {
  devServer: {
    proxy: "http://localhost:3000"
  }
};

Reactの場合 (package.json)

"proxy": "http://localhost:3000"

原因5: `Access-Control-Allow-Origin` ヘッダーが設定されていない

レスポンスヘッダーに Access-Control-Allow-Origin が設定されていないと、CORSエラーが発生する。

解決策: config/application.rb にヘッダーを追加

config.action_dispatch.default_headers = {
  'Access-Control-Allow-Origin' => '*',
  'Access-Control-Request-Method' => '*'
}

原因6: `OPTIONS` メソッドがブロックされている

CORSリクエストでは、OPTIONS メソッドを使用したプリフライトリクエストが必要になる。

解決策: config/routes.rb に match を追加

Rails.application.routes.draw do
  match '*path', to: 'application#options', via: :options
end

原因7: RailsのStrict Transport Security (HSTS) による制限

HSTSが有効になっていると、HTTPSでないリクエストがブロックされることがある。

解決策: config/environments/production.rb で設定を変更

config.force_ssl = false

原因8: `Rack::Cors` の設定が動作していない

環境変数 RAILS_ENV が適切でないと、CORS設定が適用されないことがある。

解決策: サーバー起動時に RAILS_ENV を指定

RAILS_ENV=development rails s

まとめ

• rack-cors の設定を適切に行う
• CSRFトークンをAPIリクエストで無効化する
• フロントエンド側で credentials: "include" を設定する
• proxy を正しく設定し、フロントエンドとバックエンドを連携させる
• Access-Control-Allow-Origin ヘッダーを適切に設定する
• OPTIONS メソッドを許可する
• HSTS設定を確認する
• RAILS_ENV の設定を適切にする

これらの方法を試すことで、「ActionController::InvalidCrossOriginRequest」のエラーを解決できる。