Nuxt.jsを用いて検索フォームを作成したい

前提・実現したいこと

BlockstreaAPIを用いてビットコインのトランザクション検索画面を作りたいと思っています。
Nuxt.jsは初めて触るのでこのQiitaの記事を参考にとりあえずコードはそのままに郵便番号検索フォームを作成することにしました。

記事の場合と違い、開発環境では」yarnを使っています。

発生している問題・エラーメッセージ

てきとうな番号を入力し検索してみると次のようなエラーと警告が出てきました

該当のソースコード

記事と同じくpages/test.vueのコードです。
ここでは名前をtest2.vueとしています。
localhost:3000につなげ、任意の郵便番号を入力し検索する形です。

vue
1<template>
2  <section class="container">
3    <input type="text" placeholder="郵便番号を入力" v-model="zipcode"/>
4    <button @click="searchAddressInfo">住所自動入力</button>
5      <p>都道府県：{{addressData['address1']}}</p>
6      <p>住所1：{{addressData['address2']}}</p>
7      <p>住所2：{{addressData['address3']}}</p>
8  </section>
9</template>
10
11<script>
12const axios = require('axios');
13
14let url = 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=';
15
16export default {
17  data() {
18    return {
19      zipcode: '',
20      addressData: {}
21    }
22  },
23  methods: {
24    searchAddressInfo() {
25      axios.get(url + this.zipcode).then((res) => {
26        this.addressData = res.data.results[0];
27      })
28    }
29  }
30}
31</script>

試したこと

Qiitaの記事に書いてある通りにクロスドメイン問題かと思い
$yarn add axios
$yarn dev
$open /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir
を実行し、もう一度検索しましたが結果は同じでした。