web-dev-qa-db-ja.com

Javascriptでフェッチする相対パス

今日、Javascriptの相対パスの経験に驚きました。状況を次のように要約しました。

次のようなディレクトリ構造があるとします。

app/
   | 
   +--app.html
   +--js/
        |
        +--app.js
        +--data.json

app.htmlが実行するのはjs/app.jsを実行することだけです

<!DOCTYPE html>
<title>app.html</title>
<body>
<script src=js/app.js></script>
</body>

app.jsはJSONファイルをロードし、bodyの先頭に貼り付けます：

// js/app.js
fetch('js/data.json') // <-- this path surprises me
  .then(response => response.json())
  .then(data => app.data = data)

データは有効なJSONで、単なる文字列です。

"Hello World"

これはfetchの最小限の使用法ですが、fetchに渡すURLがapp.htmlの代わりにapp.jsに相対的でなければならないことに驚いています。 data.jsonとapp.jsは同じディレクトリ（js/）にあるため、このパスが機能することを期待します。

fetch('data.json') // nope

なぜそうなのか説明はありますか？

javascriptpathrelative-pathfetch-api
18
user2467065

fetch('data.json')と言うと、リクエスト元のページに関連しているため、事実上_http://yourdomain.com/data.json_をリクエストしています。スラッシュでリードする必要があります。これは、パスがドメインルートfetch('/js/data.json')に相対的であることを示します。または、ドメインfetch('http://yourdomain.com/js/data.json')で完全な品質を実現します。

25
j_ernst