ローカル環境に置いたjsonファイルが読み込まれない

Question

ローカル環境（sr/data/data.json）にあるjsonファイルを読み込もうとしているのですが、
404エラー（Request failed with status code 404）になってしまいます。

リクエストのパスは http://localhost:8080/src/data/data.json ですが、
まさにここにjsonファイルが入っているのですが、なぜか404と言われてしまいます。

これを読み込むには、どうしたらいいのでしょうか？
今回は練習のため、asyncとawaitを使ってみようとしていました。
jsonファイルの記述にも問題はないと思われます。

import axios from 'axios';

async function getList() {
    try {
        const res = await axios('./src/data/data.json');
        console.log('res', res);        
    } catch(error) {
        console.log(error);
    }
};

getList();

[
    {
        "task" : "Watch movies",
        "status" : "Finished",
        "priority" : "Important"
    },
    {
        "task" : "Read books",
        "status" : "Finished",
        "priority" : "" 
    },
    {
        "task" : "Brush teeth",
        "status" : "Finished",
        "priority" : "Important" 
    },
    {
        "task" : "Walk a dog",
        "status" : "Finished",
        "priority" : "Important" 
    },
    {
        "task" : "Watch YouTube",
        "status" : "Finished",
        "priority" : "" 
    }
]

Answer 1

どうしても読み込めないので、jsファイルに、外部から読み込もうとしていたdata.jsonのファイルの中身をすべてコピペしました。

Answer 2

質問者のコメント『localhost:8080 にアクセスすると、src/index.html が表示される』に従うと

URL:　http://localhost:8080/

と

ローカルファイルのパス： src/

が対応しているのだと考えられます（index.htmlは、src/フォルダーの中から選ばれた）

だとすると

URL:　http://localhost:8080/src/data/data.json

は

ローカルファイルのパス： src/src/data/data.json

に対応するのではないでしょうか？

＝＝
ローカル環境（src/data/data.json）にあるjsonファイルのコピーを、
ローカル環境の src/src/data/data.json に置くとエラーが無くなりませんか？

Comments

[vankick]

srcフォルダの中にさらにsrcフォルダを作成し、その中にjsonファイルを入れてみましたが、読み込めません。他のjpgなどもimgタグでは直接読み込めないようなので、外部ファイルを読み込むためには何か特別な処理をしないといけないのかもしれません。

[coco_bauer]

「srcフォルダの中にさらにsrcフォルダを作成し、その中にjsonファイルを入れてみました」というのは、どういうファイルパスに、何という名前のjsonファイルを置いたという事ですか？　ファイルパスが正しくないという問題を解消しようとしているのですから、ファイルパスを明記してください。

[vankick]

質問に記載したのですが、
リクエストのパスは http://localhost:8080/src/data/data.json
まさにここにdata.jsonファイルが入っています。ですが、404と言われてしまいます。
（srcフォルダの中にさらにsrcフォルダを作成してみたのは、coco_bauerさんが「ローカル環境の src/src/data/data.json に置くとエラーが無くなりませんか？」とアドバイスしてくださったので、試してみました。）

Answer 3

「http://localhost:8080/src/data/data.json 」をダイレクトに
ブラウザにurl入力したら開けるという認識でよろしいですか？
そうなると相対パスが間違えているとかそういうレベルのは話ではないでしょうか？
あとはfetchなどで試してみるきりわけができるかもしれません

Comments

[vankick]

「http://localhost:8080/src/data/data.json 」と入力すると、Cannot GET /src/data/data.json と表示されてしまいます。そもそもasync/awaitが間違っているのかもしれないです。。

[yambejp]

単に間違ったパスにjsonファイルを置いただけでは？
ちなみにローカル環境でためしているのなら
portは80のままいじらないほうが
問題の切り分けになるとおもいます

[vankick]

パスは間違えておらず、確かにsrc/data 内にjsonファイルが置いてあります。
localhost:8080 にアクセスすると、src/index.html が表示されるので(実際はdist/index.html なのに、bundleした結果そうなる)、そういう部分でも設定が必要なのかもしれません。

[yambejp]

たとえば本当は
http://localhost:8080/data/data.json
だったり、思い込みでの勘違いの可能性もあるので
よくよく設定を確認してください

[vankick]

試しに、index.jsに <img src="test.jpg">と書き、index.jsと同じ階層に test.jpg ファイルを置いてみたのですが、それでも何も表示されません。（ソースにはちゃんと <img src="test.jpg"> と表示されます）外部ファイルのパスがちゃんと表示されないようです。

[coco_bauer]

index.jsって、JavaScriptのプログラムが入っているのですか? <img src="test.jpg">のようはHTMLタグをブラウザで表示するのなら、index.htmlなどのHTMLファイルに書かないといけません。　
404エラーは「(指定されたパスに）ファイルが無いです！」というものですから、原因は誤ったファイルパスにあることは確実です。このような認識をもって、原因究明してください。

[gentaro]

コレJavaScriptの問題じゃなくて、ローカル開発サーバー側でlocalhost:8080/srcにマップしている（と思っている）設定が間違っているんじゃ…

[hentaiman]

Options Indexes にして確認した方が早い気が

[vankick]

パスの指定は合っています。100%絶対にそのパスにファイルが置いてあるのですが、パスは合っているはずなのに404と表示されてしまうため、どうしてそのように認識されてしまうのか不思議に思い、質問していました。gentaroさんがご指摘いただいた通り、多分サーバーの設定か何かが間違っているのだと推測します。皆さま、ありがとうございました。