【Nuxt 2】郵便番号検索APIによるデータ取得サンプル

Nuxt2

2021/05/24

サンプル

郵便番号検索 API

郵便番号検索 API については、以下を参照してください。

zipcloud

解説

ここでは、あまり深い解説はしません。 NuxtJS による API 連携については、こちらの記事に詳しい解説を掲載していますので、よろしければ参考にしてください。

@nuxtjs/axios

NuxtJS では、@nuxtjs/axiosを使って API 接続を行います。

設定手順は以下になります。プロジェクト作成時に追加している場合は不要です。

インストール
```
$npm i @nuxtjs/axios
```

nuxt.config.jsのmodulesに追加

export default {
  modules: ['@nuxtjs/axios'],
}

API へリクエストを送信する場合は、以下のようにthis.$axiosとします。 axiosはPromiseを返すので、async/awaitと組み合わせます。

methods: {
  async fetch() {
    const res = await this.$axios.get('/api/search')
  }
}

CORS

郵便番号検索 API では、ブラウザからのリクエストを拒否するように CORS が設定されています。そのためそのままアクセスしてもエラーとなってしまいます。

これを回避するために、プロキシの設定を行います。 nuxt.config.jsに以下を追加します。

export default {
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/': {
      target: 'https://zipcloud.ibsnet.co.jp/api/',
      pathRewrite: { '^/api/': '' },
    },
  },
}

これにより/api/searchにリクエストを送信すれば、目的の API に接続できるようになります。

結果の取得

上記 2 つを踏まえ、データを取得するメソッドを作成します。

methods: {
  async fetch() {
    const params = { zipcode: this.zipcode };
    const res = await this.$axios.get("/api/search", { params });
    this.result = res.data;
  },
},