Vue

Vue.js jsonのデータを読み込む

Vue.jsを使って、json形式のデータを読み込んでみる。

基本動作テスト

See the Pen Axios 動作テスト by git-cat-meow (@git-cat-meow) on CodePen.

参考サイトをお手本に、データを読み込んでみる。コンソールで確認すると、しっかりデータが読み込まれている。

自作のjsonを読み込んでみる

https://nyagolante.net/sandbox/sample.json

サンプルデータをコピーしたjsonを作成して、このサイトのサーバにアップロードしてcodepenでテストするがエラーで取得できない。

See the Pen AXIOS by git-cat-meow (@git-cat-meow) on CodePen.

データが取得できないの図。しばらく試行錯誤してみるが、なかなかaxiosをとっかかりにした検索でも引っかかって来ない。

少し検索ワードの範囲を広げてみてajaxで検索をかけてみると、セキュリティ関係の理由で別サーバのデータを読み込めない仕様によるものだと判明。

【CORS】クロスドメインによるエラーについて
https://qiita.com/tarch710/items/f4caa1eac918e1824293

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<div id="app">
  <p>{{ users }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    users: []
  },
  mounted :function(){
    axios.get('https://nyagolante.net/sandbox/sample.json')
          .then(response => this.users = response.data)
          .catch(error => console.log(error))
  }
})
</script>

ゆえにテスト用のHTMLをこのサイトにアップロードしてみると、しっかり読み込めた。

試しにこのサイトのサーバから適当な他ドメインのjsonにアクセスを試みると、しっかりエラーが返ってきた。

Access to XMLHttpRequest at 'https://xxx.jp/xxx.json' from origin 'https://nyagolante.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

サーバ側でアクセス許可を出す方法もしっかりあるようなので、ドメインまたぐ共通データなどを取り扱う場合はそれらの措置が必要。

ひとまずデータを読み込むところまではできるようになった。次は特定の値を読み込む。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る