【Vue.js】Vue.js サンプル「商品データ一覧」axiosでAPIリクエスト(jsonファイル読み込み)



↓↓完成動画
https://twitter.com/nonnonkapibara/status/1167474872043180032
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">⛱️Vue.js⛱️<br>axiosでAPIリクエスト(jsonファイル読み込み)で<br>商品データ一覧作ってみたよぉ。<br>表示条件や、抽出条件の絞り込みができるようにしてみたよぉ。<a href="https://t.co/atGXTCrWaz">https://t.co/atGXTCrWaz</a><a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://t.co/lkOnoas3Mj">pic.twitter.com/lkOnoas3Mj</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1167474872043180032?ref_src=twsrc%5Etfw">August 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



↓↓実際に動かせる
https://noteitemlist.netlify.com/

<br>
商品データ一覧　jsonファイル

```json:nonItemList.json

[
      {"no": 1, "product_name":"coffee", "imgPath":"https://noteitemlist.netlify.com/pic/coffee.png", "amount":800, "shipping_fee":150, "model_number":110, "zooFlag":false},
      {"no": 2, "product_name":"deer", "imgPath":"https://noteitemlist.netlify.com/pic/deer.png", "amount":100, "shipping_fee":0, "model_number":106, "zooFlag":true},
      {"no": 3, "product_name":"duck", "imgPath":"https://noteitemlist.netlify.com/pic/duck.png", "amount":300, "shipping_fee":0, "model_number":101, "zooFlag":true},
      {"no": 4, "product_name":"fox", "imgPath":"https://noteitemlist.netlify.com/pic/fox.png", "amount":400, "shipping_fee":120, "model_number":100, "zooFlag":true},
      {"no": 5, "product_name":"goldfish", "imgPath":"https://noteitemlist.netlify.com/pic/goldfish.png", "amount":900, "shipping_fee":0, "model_number":112, "zooFlag":true},
      {"no": 6, "product_name":"horse", "imgPath":"https://noteitemlist.netlify.com/pic/horse.png", "amount":1100, "shipping_fee":50, "model_number":102, "zooFlag":true},
      {"no": 7, "product_name":"ladybug", "imgPath":"https://noteitemlist.netlify.com/pic/ladybug.png", "amount":1000, "shipping_fee":150, "model_number":111, "zooFlag":true},
      {"no": 8, "product_name":"meat", "imgPath":"https://noteitemlist.netlify.com/pic/meat.png", "amount":200, "shipping_fee":50, "model_number":109, "zooFlag":false},
      {"no": 9, "product_name":"panda", "imgPath":"https://noteitemlist.netlify.com/pic/panda.png", "amount":600, "shipping_fee":80, "model_number":108, "zooFlag":true},
      {"no": 10, "product_name":"penguin", "imgPath":"https://noteitemlist.netlify.com/pic/penguin.png", "amount":1200, "shipping_fee":50, "model_number":103, "zooFlag":true},
      {"no": 11, "product_name":"pig", "imgPath":"https://noteitemlist.netlify.com/pic/pig.png", "amount":500, "shipping_fee":100, "model_number":105, "zooFlag":true},
      {"no": 12, "product_name":"popcorn","imgPath":"https://noteitemlist.netlify.com/pic/popcorn.png", "amount":1300, "shipping_fee":110, "model_number":107, "zooFlag":false},
      {"no": 13, "product_name":"tako", "imgPath":"https://noteitemlist.netlify.com/pic/tako.png", "amount":700, "shipping_fee":90, "model_number":104, "zooFlag":true},
      {"no": 14, "product_name":"post", "imgPath":"https://noteitemlist.netlify.com/pic/post.png", "amount":1400, "shipping_fee":80, "model_number":116, "zooFlag":false},
      {"no": 15, "product_name":"castle", "imgPath":"https://noteitemlist.netlify.com/pic/castle.png", "amount":1500, "shipping_fee":90, "model_number":117, "zooFlag":false},
      {"no": 16, "product_name":"note", "imgPath":"https://noteitemlist.netlify.com/pic/notebook.png", "amount":1700, "shipping_fee":0, "model_number":115, "zooFlag":false},
      {"no": 17, "product_name":"game", "imgPath":"https://noteitemlist.netlify.com/pic/game.png", "amount":1600, "shipping_fee":50, "model_number":114, "zooFlag":false}
    ]

```

CodePenに実装すると
<img width="1125" alt="スクリーンショット 2019-08-31 1.47.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/25ab7a5f-c8a9-0d7b-e7ff-7625777f7062.png">
Jsonファイルを読み込む場合、下記エラーとなりました。
異なるドメインからの呼び出しは制限されているようです。

Access to XMLHttpRequest at 'https://noteitemlist.netlify.com/nonItemList.json' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.


<img width="696" alt="スクリーンショット 2019-08-31 1.49.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/58501502-e52a-127d-cdd2-476435ee211e.png">


なので、VuejsとJsonファイルのサーバーを同じ場所に置いたら、ちゃんと動きました。


<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🍬Vue.js🍬<br>Vue CLI（v4.0.4） でVue.js作って、<br>Firebase(FirebaseHosting) にデプロイしてみたよぉ🤩<br><br>【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）<a href="https://t.co/W7sWcleX4A">https://t.co/W7sWcleX4A</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/Firebase?src=hash&amp;ref_src=twsrc%5Etfw">#Firebase</a> <a href="https://t.co/ajUgvvvoSZ">pic.twitter.com/ajUgvvvoSZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185650513469038592?ref_src=twsrc%5Etfw">October 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎬Vue.js🎬<br>YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル<br>作ってみたよぉ。<br>Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡<br>ちゃんと動いたよぉ😍<a href="https://t.co/y7hw3zHRlI">https://t.co/y7hw3zHRlI</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> <a href="https://t.co/C5zCM6n78R">pic.twitter.com/C5zCM6n78R</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185956946630692864?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>