【Nuxt × Rails】CORSエラーによるプロキシ設定

フロント側から、Railsにユーザー情報をフォーム送信すると、こんなエラーが。

Access to XMLHttpRequest at 'http://localhost:3000' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

通常、フロントもバックもドメインは同じURLだが、異なる場合もある。
そんな時発生するのが、クロスドメイン通信を許可しないというエラー。

そこで、プロキシ設定をNuxt側にもRails側にもすることで、CORSエラーを解消する必要がある。

CORSについては、リンクを参照にしていただければ。

フロントエンド proxyの設定をする

バック側のローカルサーバは、http://localhost:3000とする。

$ yarn add @nuxtjs/proxy

nuxt.config.js

  modules: [
    '@nuxtjs/proxy',
  ],
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: {
        '^/api': '/api'
      }
    },
  },

バックエンド CORSの設定をする

フロント側のローカルサーバは、http://localhost:8080とする。

Gemfile

gem 'rack-cors'

$ bundle install

config/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 許可するドメイン
    origins 'localhost:8080'
    # 許可するヘッダーとメソッド
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

番外編　サーバ側で、セッション管理する時

config/application.rb

config.api_only = false

APIモードを使っていたら、trueになっているので、要確認