[Nuxt.js × Rails API] axiosでRailsへ通信する際はCORSの設定が必要

NuxtとRails APIモードを用いたアプリ作成法を学んでいるのですが、NuxtからRailsへアクセスする際にはCORSと言われるものが重要みたいです。

CORSとは

CORSとはCross-Origin Resource Sharingの略です。

AJAX通信でことなるドメインへアクセスする際に、手軽に安全にアクセスするための仕様となります。

より詳しい説明は以下が参考になります。

CORS(Cross-Origin Resource Sharing)について整理してみた | Developers.IO

Nuxt側の記述

Nuxt側はaxiosでPostリクエストを送ります。

ユーザー登録を想定しています。

Railsはlocalhost:5000で立ち上げているものとします。

const user = {
  email: this.email,
  name:  this.name,
  uid:   this.uid,
};

axios.post("http://localhost:5000/v1/users", {user}).then(() => {
  this.$router.push("/");
})

Rails側の設定

まずはコントローラ設定

# controllers/v1/users_controller.rb

class V1::UsersController < ApplicationController
 
 def create
   user = User.new(user_params)
   if user.save
     render json: user, status: :created
   else
     render json: user.errors, status: :unprocessable_entity
   end
 end

 private
 def user_params
   params.require(:user).permit(:email, :uid, :name)
 end
end

続いてgem追加です。

rack-corsというgemをインストールします。

#Gemfile

gem 'rack-cors'

Gemfileにもともとコメントアウトで記述されているので、有効にし、bundle installしてください。

$ bundle install

インストールするとconfig/initializers/cors.rbというファイルが生成されているので以下のように記述します。

# config/initializers/cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do
 allow do
   origins 'localhost:3000'

   resource '*',
     headers: :any,
     methods: [:get, :post, :put, :patch, :delete, :options, :head]
 end
end

originsのところにアクセスを許可したいドメインを入力する形となります。

正規表現を用いたり、複数ドメイン書いたりできるので柔軟性あります。

これでNuxtとRailsで通信ができます！

まとめ

やはりフロントとサーバーサイド分けるのは色々と知識必要ですね。

しかしながら、処理速度は重要なので引き続き学びます。