前回記事の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