日記

日本語の勉強のためのブログ

トップ > Vue.js > 【Vue.js】axiosでローカルのJSONファイルを読み込もうとしたらエラー

【Vue.js】axiosでローカルのJSONファイルを読み込もうとしたらエラー

Vue.js

目標

ローカルにあるJSONファイルからデータを読み込んで、下記index.htmlに表示する。

階層

.
├── index.html
└── songs.json

ファイル内容

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 開発バージョン、便利なコンソールの警告が含まれています -->
    <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>
</head>
<body>
    <div id="songs">
        {{ songlist }}
    </div>

    <script>
        var app = new Vue({
            el: '#songs',
            data() {
                return {
                    songlist: null
                }
            },
            mounted() {
               axios
                    .get('songs.json')
                    .then(response => {this.songlist = response.data})
                    .catch(err => {this.songlist = err})
            }
        })
    </script>
</body>
</html>

songs.json(長いので一部省略)

{"classic": ["クラポルポルスカ", "パリのアメリカ人", "火星", "サーフサイド・サティ", "ヘ調の協奏曲 第3楽章", "ロシア民謡メドレー", "おおブレネリ"]}

とりあえず普通に

いつも通りブラウザ上で先ほどのindex.htmlを開いてみる。
普通ならJSONファイルの内容が表示されるはずだが、

Error: Network Error

と表示されてしまい、なぜかうまくいかない。
axios絡みの問題かと思いいろいろ変更したりもしたが状況は変わらず。

CORSエラー?

調べていると気になる文言を発見。

原因がわかりましたので、 回答させていただきます。
***さんのコメントにもあります通り、 CORSエラーです。
(中略)
ローカルサーバーを立てて起動すれば、同ドメインとなるため、CORSエラーはでません。
(引用注：一部伏字処理を施した)
teratail.com

詳しいことはよくわかっていないが、セキュリティ上の問題を防ぐために上記のエラーが出ているらしい。

というわけで

ローカルサーバを立てればうまくいくらしいので立ててみる。
いろいろな手段があるだろうが、今回は（使ったことがあるという理由で）python3を用いて立てることにする。

以下の記事を参考にさせて頂いた。
qiita.com

サーバを立てる

index.htmlとsongs.jsonがあるディレクトリに移動してから、

python3 -m http.server 8000

でローカルサーバを立てられる。
その状態でhttp://localhost:8000/を開くと自動的にindex.htmlの内容が表示されるはず。

結果

うまくいった。

f:id:kalax:20210820003821p:plain
図1. index.htmlの表示