axiosのインストール
APIを呼び出し、データを取得するにはaxiosというライブラリを使用します。
次のコマンドでaxiosをインストールできます。今回はnpmを使用しています。
npm install --save axios
<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を受け付ける旨を記述します。
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については以下を参考にしました。