axiosのインストール

APIを呼び出し、データを取得するにはaxiosというライブラリを使用します。
次のコマンドでaxiosをインストールできます。今回はnpmを使用しています。

npm install --save axios

frontend/src/components/MembersList.vue

<script setup>
// import { defineProps, defineEmits } from 'vue'
// import { ref } from 'vue'
import axios from 'axios';  // axiosをインポートする

let members = []

const fetchMembers = () => {
  axios.get('http://localhost:3000/members')
  .then(response => {
    events = response.data; 
  }).catch(error => {
    console.log(error);
  })
}

</script>
<template>
 <div>
    <p>{{ members }}</p>
    <button type="submit" @click="fetchMembers()">メンバーを取得</button>
  </div>
</template>

ここで、Railsサーバを起動した状態でVueサーバを起動し、local:8080を開くとコンソールにエラーが出て、GETリクエストに失敗してしまいます。

この原因はCORSです。

CORSとは Cross-Origin Resource Sharingの略で、異なるオリジン（スキーム・ホスト・ポート）間でリソース(データ)を共有したい時に、自身とは異なるオリジンにリソースへのアクセスを許可するための仕組みです。

オリジンが少し馴染みないかもしれませんが、
スキーム・ポスト・ポートで構成されたものをさします。
http://www.example.com
例えば上のURIの場合、以下のように分解できます。

スキーム：　http
ホスト: www.example.com
ポート： 3000(Railsの場合)

これらが異なる場合は脆弱性が生まれてしまい、情報漏洩などのセキュリティリスクが生まれてしまいます。
今回は、Railsの3000番とVueの8080でリソースを共有しようとしているため、エラーが出てしまいます。

CORSの設定を行わないと、Railsは他のオリジンからのアクセスを拒否するため、API通信ができません。
したがって、Rails側でhttp://localhost:8080からのリクエストを許可する設定を行う必要があります。

CORSの設定

Gemfileの# gem 'rack-cors'がコメントアウトされているので、その行のコメントを外してください。

# gem 'rack-cors'
  gem 'rack-cors'

bundle installを実行してrack-corsをインストールします。

次に以下のファイルを編集していきます。こちらもコメントアウトされているので、それを外して、originsの設定にVueのポート8080を受け付ける旨を記述します。

backend/config/initializers/cors.rb

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

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

これに加えてexposeもあります。
expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],

exposeでは、ブラウザからアクセスできるヘッダー情報の指定を行っています。
最後に、methodsはどのHTTPリクエストメソッドを許可するか、という設定になります。
APIで認証機能を作成する場合などは、これらを利用するので設定が必要ですね。

CORSについては以下の動画が大変参考になります。最初の５分程度だけで概要を理解できます。
Access-Control-Allow　ヘッダーを使用しているんですねー。

axiosについては以下を参考にしました。

axiosとrailsのCORS

axiosのインストール

CORSの設定