🦁

has been blocked by CORS policy に対処する

2021/12/30に公開約1,500字

事象

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.rbinitializers 配下に記述しているので、起動時に読み込まれる。そのため、もしサーバー起動中に書き換えた場合は書き換え後に再起動する。

参考文献

Discussion

ログインするとコメントできます