axiosで外部データを取得
axiosで外部データを取得する
参考元 書籍「基礎から学ぶ Vue.js」 https://cr-vue.mio3io.com/guide/chapter2.html#%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B
本を読んでいたらaxiosという便利そうなライブラリについて書かれていたので調べてみたメモ。
axios(アクシオス)とは
axiosは、HTTP通信を簡単に行うことができるJavascriptライブラリです。本ブログのタイトルには「フロントエンド」と書きましたが、Node.JSでも利用できます。axiosの特徴して以下のような点が挙げられます。
https://www.yoheim.net/blog.php?q=20170801より
配列が書かれた外部のJSONファイルを読み込んで、データを取得し、表示したりするっていうイメージ。
CDNで読み込むときは、bodyに
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
を埋め込む。
ここまではOK.けど、、、
この書籍にはmain.jsに
...axios.get('list.json').then(function (response) {....
を書くって書いてあったけど、list.jsonってなんだ？ってなってた。
JSONファイルとは
https://wa3.i-3-i.info/word13799.html JSONのルールは配列みたいなやつ。
JSONファイルがなんなのかはわかったけど、このlist.jsonをどこに配置するのかは書かれていなかった。 とりあえずlist.jsonをつくってindex.htmlと同じ配下に置いたけど読み込めず。
ずっと調べ続けて、見つけたのがこのサイト。
http://irts.jp/2017/02/26/2625/
getの引数にはファイル名じゃなくて
...axios.get('http://....').then(function (response) {....
というふうに外部サイトに落ちているJSONファイルのURLが書いてあった。
このサイトにあるコードを完全にコピーしたら当たり前だけどaxiosでの読み込みができた！
だからこのサイトを真似して書籍にあったコードを変更しようと思った。
JSONファイルをホスティングサーバーへ
ローカルファイルへのアクセスがブラウザのセキュリティポリシーとして禁止されているから、ローカルファイル（ここではlist.json）だと読み込むことができない。 だから、JSONファイル自体を適当なホスティングサーバーへアップロードして、それを読み込む形にする。 今回使ったのは、無料のYahoo!ジオシティーズ。 https://geocities.yahoo.co.jp/ 無料ならなんでもよかったからこれ。（2019年3月でサービス終了するらしい！）
ドラッグアンドドロップでJSONファイルをアップロードしたら、URLをコピーして、書籍にあるコードの'list.json'の部分を'(JSONファイルのURL)'に変更するだけ。
で、ブラウザ起動したら・・・ できなかった（泣）
出たエラー
Failed to load http://www.geocities.jp/hoge/list.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. main.js:12 Error: Network Error at e.exports (spread.js:25) at XMLHttpRequest.l.onerror (spread.js:25)
なぜーー
Allow-Control-Allow-Origin: *の導入
ホスティングサーバーにアップするだけじゃ駄目だと思い、Chromeの拡張機能Allow-Control-Allow-Origin: *を導入してみた。 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi/related?utm_source=chrome-app-launcher-info-dialog
やっとできた！！ ただ、この拡張機能を一度Offにすると、再びOnにしてリロードしてもエラーを吐いた。だから一度OffにしたらAllow-Control-Allow-Origin: *を削除し、もう一度インストールする必要がある。理由は不明。
Allow-Control-Allow-Origin: *導入したなら、JSONファイルをホスティングサーバーにアップしなくてもいけるかもと思ったけど、 やっぱり駄目だった。こちらも理由は不明。
場当たりすぎだけどとりあえず解決（？）したことが嬉しかった。
