勉強でバックエンドRails, フロントVue3のアプリを作成時に
VueからRailsのAPIにリクエスト時にCORSエラー
Access to XMLHttpRequest at 'http://localhost:3000/api/v1/users' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
これを解決した際のメモ
Railsは7.1.3を使用
解消手順
Railsにはrack-corsというgemが用意されているのでこれを利用
Gemfileでrack-corsがコメントアウトされている場合は解除、ない場合は追記
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin Ajax possible
gem "rack-cors"
インストールします
bundle install
次にrack-corsの設定ファイル(config/initializers/cors.rb)を修正
アクセスを許可したいドメイン(今回はlocalhost:5173想定)
とヘッダー、メソッドを設定
全部のメソッドを許可したい場合は下記でOK
# Be sure to restart your server when you modify this file.
# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin Ajax requests.
# Read more: https://github.com/cyu/rack-cors
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
origins "http://localhost:5173"
resource "*",
headers: :any,
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
あとはRailsを再起動すればOK
これで解消しました
ちなみにVue側のリクエスト設定は下記記事に書いてあるので興味ある方は読んでみてください