【Railsサンプルアプリ】Rails – VueアプリのCORS対応

【Railsサンプルアプリ】Rails – VueアプリのCORS対応

前回記事のRailsバージョンをVueで表示する際、
http://localhost:8080からhttp://localhost:3000がクロスドメイン通信になっており、CORSへの対応が必要でした。

今回CORSへの対応をrack-corsでの対応を試しました。

参考サイト:https://qiita.com/tanshio/items/f35efa7321066d60fc62

概要

  1. Rails側
    1. rack-corsのインストール
  2. Vue側
    1. 動作確認

詳細

rack-corsのインストール

Gemfile
group :development, :test do
  gem 'rack-cors', :require => 'rack/cors'
end

bundle installする

application.rb
~~省略~~
    # Don't generate system test files.
    config.generators.system_tests = nil

    if Rails.env.development?
      config.middleware.insert_before ActionDispatch::Static, Rack::Cors do
        allow do
          origins '*'
          resource '*',
            :headers => :any,
            :methods => [:get, :post, :options, :patch, :delete]
        end
      end
    end
  end
end

動作確認

エラーが出ず、バージョンが表示されていることを確認しました。

ソースはこちら(GitHub)

https://github.com/inaishunsuke/rails-vue-sample-version

【Railsサンプルアプリ】Rails – VueアプリのCORS対応」への1件のフィードバック

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください