Nuxt.jsのserverMiddlewareを使って、apiを叩く

更新日：2019年3月11日

こんにちは、mabuiです。
今回はNuxt.jsのserverMiddlewareを使って、apiを叩く方法を書いていきます。

クライアントから直接外部ドメインのapiを叩くと、クロスドメイン問題でブラウザのセキュリティエラーが発生しますが、この方法だと好きなタイミングでサーバーサイドから外部apiを叩くことが可能です。

別の方法として、asyncDataを使用してサーバーサイドから外部apiを叩くことも可能ですが、この方法だと叩くタイミングがコンポーネントの呼び出し時に限定されてしまいます。

流れとしては下記です。
1, Vuexのactionsから、axiosでserverMiddlewareを叩く
2, serverMiddlewareから、axiosでapiを叩く

コード紹介

今回はVuexのactionsに実行メソッドを用意しました。
Vuexのdispatchメソッドを使用して、コンポーネントの任意のタイミングで実行しましょう。

store/index.js

export const actions = {
  api() {
    const api = 'https://api.coingecko.com/api/v3/coins/list';
    // ローカルのドメイン取得
    const baseUrl = `${location.protocol}//${location.host}`;

    // クロスドメイン問題のため、serverMiddlewareからapiを叩く
    axios.get(`${baseUrl}/server-middleware-api?api=${api}`);
  }

export const actions = {

api() {

const api = 'https://api.coingecko.com/api/v3/coins/list';

// ローカルのドメイン取得

const baseUrl = `${location.protocol}//${location.host}`;

// クロスドメイン問題のため、serverMiddlewareからapiを叩く

axios.get(`${baseUrl}/server-middleware-api?api=${api}`);

}

今回は外部apiとして、coingeckoの仮想通貨銘柄の一覧を取得するapiを使用しています。
次はserverMiddlewareの実装です。

serverMiddleware/api.js

const axios = require('axios');

module.exports = (req, res) => {
  const api = req.query.api;
  axios.get(`${api}`)
    .then(response => {
      // レスポンスのデータとステータスを出力
      console.log(response.data);
      console.log(response.status);
    });
};

const axios = require('axios');

module.exports = (req, res) => {

const api = req.query.api;

axios.get(`${api}`)

.then(response => {

// レスポンスのデータとステータスを出力

console.log(response.data);

console.log(response.status);

});

};

最後に、serverMiddlewareのパスを設定します。

nuxt.config.js

module.exports = {
  serverMiddleware: [
    { path: '/server-middleware-api', handler: '~/serverMiddleware/api' }
  ]
}

module.exports = {

serverMiddleware: [

{ path: '/server-middleware-api', handler: '~/serverMiddleware/api' }

]

}

以上で、actionsのapiメソッドを実行して、コンポーネントの好きなタイミングで外部apiを実行できるようになりました。