Nuxt.js WebApiをaxiosと@nuxtjs/proxyを使って取得する

Nuxt.js WebApiをaxiosと@nuxtjs/proxyを使って取得する

nuxt.jsで、クロスオリジンリソース( Cross-Origin Resource )を共有するための解決策である@nuxtjs/proxyの簡単な利用手順

環境

  • OS  ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

nuxt.js環境構築

proxy-testという名前でプロジェクトを作成してます。

BuefyとAxiosを選択してます。

ディレクトリ移動

@nuxtjs/proxyインストール

@nuxtjs/proxyをインストールします

nuxt.config.jsのmodulesを編集します。

今回は、こちらからjsonを取得するので、axiosとproxyも下記のように編集します。

@nuxtjs/proxyの使い方

layouts配下のdefault.vueのscriptタグ内を下記のとおりに編集します

pages配下にapi.vueというファイルを作成して、下記のように編集します。

ブラウザから http://プライベートIP:3000/api にアクセスするとproxyを利用してApiが取得されていることが確認できます。