RailsでCORSの許可設定

RailsAPIとして運用する場合CORSの設定が必要になる。 ググれば一発で出てくるような内容だが、備忘録をかねてdiffを記載する。

ざっくりやること以下の通り。これでダメならclient側の実装を見直した方が良いかもしれない。 (実際 axiosに渡すURLに、"http://"あたりを付け忘れてうまくいかないなーと思ってたこともあるので)

  • rack-cors(gem)のコメントを外す
  • bundle install
  • config/initializers/cors.rb のコメントを外す
  • originを設定する。
diff --git a/api/Gemfile b/api/Gemfile
index 06bd1ee..2f02332 100644
--- a/api/Gemfile
+++ b/api/Gemfile
@@ -23,7 +23,7 @@ gem 'bcrypt', '~> 3.1.7'
 gem 'bootsnap', '>= 1.4.2', require: false
 
 # Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
-# gem 'rack-cors'
+gem 'rack-cors'
 
 gem 'annotate'

diff --git a/api/config/initializers/cors.rb b/api/config/initializers/cors.rb
index 3b1c1b5..bcb4a5b 100644
--- a/api/config/initializers/cors.rb
+++ b/api/config/initializers/cors.rb
@@ -5,12 +5,13 @@
 
 # Read more: https://github.com/cyu/rack-cors
 
-# Rails.application.config.middleware.insert_before 0, Rack::Cors do
-#   allow do
-#     origins 'example.com'
-#
-#     resource '*',
-#       headers: :any,
-#       methods: [:get, :post, :put, :patch, :delete, :options, :head]
-#   end
-# end
+Rails.application.config.middleware.insert_before 0, Rack::Cors do
+  allow do
+    origins 'http://localhost:4000'
+
+    resource '*',
+      headers: :any,
+      methods: [:get, :post, :put, :patch, :delete, :options, :head],
+      credentials: true
+  end
+end