Vue3 + TypeScriptにてaxiosを導入

プログラミング

2024.02.13

Vue3の勉強でバックエンドAPIにリクエストを送るためにaxiosを入れてみたのでその手順メモ

ちなみにバックエンドはRails

Vue側の設定
CORSのエラーが出た

Vue側の設定

まずはaxiosをインストール

yarn add axios

次に各APIへのリクエストを設定、今回はuserのをgetするAPIを想定

privateの中にAPIのエンドポイントやheader情報を設定

// api-service.ts
import axios, { AxiosInstance } from "axios";

class ApiService {
  private apiClient: AxiosInstance = axios.create({
    baseURL: "http://localhost:3000",
    headers: {
        "Content-type": "application/json",
        "API-KEY": "必要あれば設定",
    },
  });

  getUsers() {
    return this.apiClient.get("/api/v1/users");
  }
}

export default new ApiService();

実際にコンポーネントで呼び出すには以下のように実装

<script setup lang="ts">
  import ApiService from "../api-service";

  const users = async () => {
    const response = await ApiService.getUsers();
    console.log(response.data);
  };
</script>

ここまで出来ればあとはAPIが追加されたらapi-serveice.tsに追加していくだけ

CORSのエラーが出た

リクエストしたら以下のエラーが出た

Access to XMLHttpRequest at 'http://localhost:3000/api/v1/users' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

バックエンド（Rails側）で解決したのでその手順は以下の記事