📚

バック/フロントエンドAPIの連携について(ExpressとVue CLIのケース)

2 min read

完全に個人的な備忘録だが、もし詳しく知りたい方がいたら是非コメントを頂きたい。

  • gitでコードを確認したい
  • 説明が不十分な箇所がある
    etc..

経緯

下記の講座を参考に、PosgreSQLとExpressによるバックエンドAPIを開発した。しかし、フロントエンドであるVue CLIとの接続方法がいまいち分からなかったので悩んでいた。「axiosを使えばいいらしいけど、どうやって。。?」みたいな。人に聞きながら作ったが、大したことなかったので一応共有。
参照:https://www.udemy.com/course/node-postgresql/learn/lecture/8401040?start=600

開発の流れ

フォルダはExpressとVue CLIの二つを準備した。Expressは、上記のチュートリアルを参考に作ったもの。Vue CLIはデフォルト設定でインストールしただけ。

Vue CLIのsrcフォルダのmain.jsに下記の記載を追加した。当たり前だが、axiosをインポートしなければ使うことはできない。

import axios from 'axios' //追記
import VueAxios from 'vue-axios' //追記

Vue.use(VueAxios, axios) //追記

次にcomponentsフォルダのHelloWorld.vueを編集。編集したのは、templateタグとscriptタグ。

  • ボタンをクリックしたら、expressから取得した情報を表示したかったので、inputタグを使っている。inputタグで表示されるtodolistはnullの初期設定で、クリックがされるとデータが挿入される仕組み。
  • methodsはthis.axios以降でexpressの情報を取得している。expressではlocalhost:3000で起動しているので、こちらの情報を取得している。
<template>
  <div class="hello">
    <input @click="get" type="button">
    {{ todolist }}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      todolist: null
    }
  },
  methods: {
    get() {
      this.axios.get("http://localhost:3000/todolist").then(res => {
        console.log(res);
        this.todolist = res["data"][0];
      }).catch(err => {
        console.log(err);
      });
    }
  }
}
</script>

しかしこの設定だけだと、vueのproxy errorが出てしまう。そのためルートフォルダにvue.config.jsを作成し、以下の記載をする。ちなみにこの辺はよくわからん。詳しく知りたい人は、下記のURLを参照すること。
参照:https://forum.vuejs.org/t/cors-vue-proxy-error/101827

module.exports = {
    devServer: {
        proxy: 'http://localhost:3000/'
       }
     };

もちろん、バックエンドAPI側でもCORSのエラーが発生してしまうので、それを許可する記述が必要。具体的には、バックエンドAPIフォルダのapp.jsファイルにて以下の記載をすること。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  next();
});

Discussion

ログインするとコメントできます