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.サーバ側でアクセス許可を出す方法もしっかりあるようなので、ドメインまたぐ共通データなどを取り扱う場合はそれらの措置が必要。
ひとまずデータを読み込むところまではできるようになった。次は特定の値を読み込む。
