CORSの設定を実施

backend/.rubocop.yml

@@ -35,4 +35,9 @@ Style/HashSyntax:
   Enabled: false
 
 RSpec/ExampleLength:
-  Enabled: false
+  Enabled: false
+
+# SymbolArrayのStyleを%記法に統一
+Style/SymbolArray:
+  EnforcedStyle: percent
+  MinSize: 2

backend/config/initializers/cors.rb

@@ -5,12 +5,12 @@
 
 # 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 ENV.fetch('FRONTEND_DOMAIN')
+
+    resource "*",
+      headers: :any,
+      methods: %i[get post put patch delete options head]
+  end
+end

docker-compose.yml

@@ -13,8 +13,8 @@ services:
     env_file:
       - ./infra/env/backend.env
     ports:
-      - 3000:3000
-    command: sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
+      - 8080:8080
+    command: sh -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 8080 -b '0.0.0.0'"
     depends_on:
       db:
         condition: service_healthy

infra/env/backend.env.template

@@ -1,2 +1,3 @@
 DATABASE_URL=mysql2://root:root@db/app_development
 DATABASE_TEST_URL=mysql2://root:root@db/app_test
+FRONTEND_DOMAIN=http://localhost:3000