😺

vue2 + axios + Expressで簡易API連携させる。

2022/06/28に公開

Vue.js

axios

Express

tech

サーバーは苦手だが、フロントとのAPI通信テストをする必要が出てきたので、
nodejsで作れるExpressサーバーを作ってみることにしました。

簡易作成したいのでDBを使わず、単にデータサンプルを返すだけのサーバーを作成します。

ゴールは、/usersでユーザー一覧を返すこと。

公式に書いてあるQuickStartの通りに進めていきます。
https://github.com/expressjs/express

STEP 1. Expressで新規プロジェクトを作る

簡単にexpressサーバーを立てるために、インストールする

$ npm install -g express-generator@4

express CLIで新規プロジェクトを作成する

$ express express-sandbox && cd express-sandbox

必要なパッケージをインストールする

$ npm install

サーバーを立ち上げる

$ npm start

http://localhost:3000 で確認。

STEP 2. ファイルを編集する

ここからrouteを編集していきます。

/usersのgetリクエストが来たら、usersオブジェクトを返すシンプルサーバーを作ります。
自動生成されたroutes/users.jsファイルを編集。

routes/users.js

var express = require("express");
var router = express.Router();

/* GET users listing. */
router.get("/", function (req, res, next) {
  const users = [ //追加
    { id: 1, name: "john" },
    { id: 2, name: "kevin" },
    { id: 3, name: "yama" },
  ];
  res.send({ users });
});

module.exports = router;

http://localhost:3000/users　で確認。

表示されてたら、OKです！

STEP 3. フロント側のAPIを作成する

axiosをインストール

npm install axios

APIリクエストのベースを作成する

/apis/index.js

import axios from "axios"

const useFetch = axios.create({
  // baseURL: "https://jsonplaceholder.typicode.com", //fakeApi
  baseURL: "http://localhost:3000",
  timeout: 2000,
})

const getAsync = async (path) => {
  return await useFetch.get(path)
}

export { getAsync }

ユーザー取得用のapi窓口を作る

apis/users.js

import { getAsync } from "./index"

const getUsersAsync = async () => {
  const users = await getAsync("/users")
  return users.data
}

export { getUsersAsync }

コンポーネントで使う

usersList.vue

<template>
  <div>
    <pre>{{ state }}</pre>
  </div>
</template>

<script>
import { defineComponent, onBeforeMount, reactive } from "@vue/composition-api"
import { getUsersAsync } from "@/apis/axios/users"

export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      users: [],
    })
    const getUsers = async () => {
      const users = await getUsersAsync()
      state.users = users
    }

    onBeforeMount(() => getUsers())

    return { state }
  },
})
</script>

これで実際にアプリを動かすと、、

CORSエラーになります。。。

この記事読んで解決！

解決方法（リスクは多々ありそうなので、暫定対策的に。。）

サーバー(express)側でcorsライブラリをインストールする。

npm install cors

サーバー(express)側のapp.jsに追加する。

app.js

const cors = require("cors");
var app = express();
app.use(cors());

これで全リクエストに対してcors問題が起きなくなりました！
セキュリティ的に問題があると思いますが、開発時だけで使うサーバーなので、
とりあえずこれでしのぎます！