Zenn
🦁

has been blocked by CORS policy に対処する

2021/12/30に公開
Ruby
tech

事象

Rails + React(Typescript) でアプリを作っていたところ、API呼び出し部分で以下のようなエラーが発生したため対処する。

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

環境

原因

バックエンドとフロントのオリジンが違い、かつバックエンド側で異なるオリジンからのアクセス（CIOS）を許可していないために起こる。
オリジンとCIOSの説明は https://qiita.com/att55/items/2154a8aad8bf1409db2b を見ると良い。

対処方法

サーバー側でフロントからのアクセス（http://localhost:3001）を許可する。

もちろんバックエンドとフロントエンドのオリジンを統一（Railsでフロントも作る）すればこの問題は起こらないが、今回のように別フレームワークで作っているような場合はオリジンが別れてしまうため、サーバー側で特定のオリジンからのアクセスを許可する必要がある。

やり方

  1. Gemfile 内にある gem 'rack-cors' のコメントアウトを外す
  2. bundle install
  3. config/initializers/cors.rb の以下の部分に許可したいオリジンを記述する。
    Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    ## 今回だと許可したいオリジンは http://localhost:3001 なのでこれを記述する
    origins 'http://localhost:3001'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end
  4. bin/rails s
    • cors.rb は initializers 配下に記述しているので、起動時に読み込まれる。そのため、もしサーバー起動中に書き換えた場合は書き換え後に再起動する。

参考文献

Discussion